/* ============================================================
   Decalque, estúdio de tatuagem (projeto conceito da Brightframe)

   A regra da página inteira: roxo é provisório, preto é definitivo.
   Roxo é a cor do decalque, a linha de papel térmico que vai na pele
   antes da agulha, quando ainda dá para mudar tudo. Por isso o roxo
   aparece no que ainda pode mudar (o estêncil, a escolha que a pessoa
   está fazendo, o passo em andamento) e o preto no que já foi decidido.

   O papel da página é o papel térmico, um tema só, de propósito: o
   estúdio é um lugar claro e limpo, e o escuro fica para o portfólio.
   ============================================================ */

:root{
  /* superfícies */
  --papel:#F3F2EE; --folha:#E9E7E1; --branco:#FBFAF7;
  /* tinta: o terceiro degrau é só decorativo */
  --tinta:#0C0C0D; --tinta2:#4A4A50; --tinta3:#8C8C92;
  --claro:#F3F2EE; --claro2:#B9B8B2;
  /* marca: o roxo do estêncil */
  --roxo:#5A3FD0; --roxo-escuro:#432AA6; --roxo-claro:rgba(90,63,208,.10); --roxo-linha:rgba(90,63,208,.38);
  /* apoio: pele, só onde o desenho é posto no corpo */
  --pele:#E8CDBA; --pele2:#DDB9A2;
  /* linhas */
  --linha:rgba(12,12,13,.13); --linha2:rgba(12,12,13,.32);
  --linha-clara:rgba(243,242,238,.16); --linha-clara2:rgba(243,242,238,.34);
  /* estado */
  --erro:#B3261E;
  /* sombras */
  --s1:0 1px 0 rgba(12,12,13,.06);
  --s2:0 24px 48px -28px rgba(12,12,13,.32),0 1px 0 rgba(12,12,13,.06);
  --s3:0 40px 90px -40px rgba(12,12,13,.45);
  /* fontes */
  --display:"Gloock","Iowan Old Style","Times New Roman",serif;
  --sans:"Onest",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"Fragment Mono",ui-monospace,"SF Mono",Consolas,monospace;
  /* movimento e largura */
  --ease:cubic-bezier(.2,.8,.2,1);
  --maxw:1360px;
  --gut:clamp(20px,4vw,56px);
}

/* Troca de página como folha passando: as quatro páginas são um site só. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
/* As fotos levam width/height só para o navegador reservar a proporção; quem
   manda no tamanho é a caixa. */
main img{width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--roxo);color:var(--claro)}
:focus-visible{outline:2px solid var(--roxo);outline-offset:3px}
main{overflow-x:clip}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:10px;z-index:99;background:var(--tinta);color:var(--claro);padding:10px 14px}
.pular:focus{left:10px}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1;text-wrap:balance}
.rotulo{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta2)}

/* A mira de registro: o círculo é tinta, a cruz é o roxo do estêncil. É a
   marca que o tatuador usa para alinhar o decalque na pele. */
.mira{width:22px;height:22px;flex:none;fill:none;stroke-width:1.6}
.mira circle{stroke:currentColor}
.mira path{stroke:var(--roxo)}

/* ---------- botões e links ----------
   O botão é tinta e fica roxo no hover: o roxo é a prévia, o clique é a
   decisão. */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 24px;border:0;border-radius:2px;
  background:var(--tinta);color:var(--claro);font:600 15.5px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.bt:hover{background:var(--roxo)}
.bt:active{transform:translateY(1px)}
.seta{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.bt:hover .seta{transform:translateX(3px)}
.bt-claro{background:var(--claro);color:var(--tinta)}
/* No celular estreito o rótulo longo quebra em vez de empurrar a coluna
   para fora da tela. */
@media(max-width:420px){.bt{white-space:normal;text-align:left;line-height:1.25;padding:14px 20px}}
.bt-claro:hover{background:var(--tinta);color:var(--claro)}
.bt-texto{background:none;border:0;padding:6px 0;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.link{font-weight:500;font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  transition:color .2s ease,text-decoration-color .2s ease}
.link:hover{color:var(--roxo)}
.link-claro{color:var(--claro)}
.link-claro:hover{color:var(--claro);text-decoration-color:var(--claro2)}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;height:76px;padding:0 var(--gut);
  background:rgba(243,242,238,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);
  view-transition-name:topo}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.marca span{font-family:var(--display);font-size:27px;letter-spacing:-.01em;line-height:1}
.menu{display:flex;align-items:center;gap:30px;margin-left:auto}
.menu a{font-size:15px;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent;transition:border-color .2s ease,color .2s ease}
.menu a:hover{color:var(--roxo)}
.menu a[aria-current="page"]{border-bottom-color:var(--tinta)}
.menu .menu-pedir{background:var(--tinta);color:var(--claro);padding:12px 18px;border:0;border-radius:2px}
.menu .menu-pedir:hover{background:var(--roxo);color:var(--claro)}
.abrir-menu{display:none;margin-left:auto;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.abrir-menu span:not(.so-leitor){position:absolute;left:10px;right:10px;height:1.6px;background:var(--tinta);transition:transform .3s var(--ease)}
.abrir-menu span:nth-child(1){top:17px}
.abrir-menu span:nth-child(2){top:26px}
.menu-aberto .abrir-menu span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.menu-aberto .abrir-menu span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
@media(max-width:900px){
  .topo{height:66px}
  .abrir-menu{display:block}
  .menu{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:flex-start;gap:4px;padding:18px var(--gut) 28px;
    background:var(--papel);border-bottom:1px solid var(--linha);transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .25s ease,transform .3s var(--ease)}
  .menu a{font-family:var(--display);font-size:34px;font-weight:400;padding:8px 0}
  .menu .menu-pedir{font-family:var(--sans);font-size:16px;font-weight:600;margin-top:14px;padding:16px 20px}
  .menu-aberto .menu{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- a palavra em contorno ----------
   Sem JS ela já nasce preta. Com JS começa como decalque (contorno roxo) e
   se enche de tinta logo depois: a mesma assinatura da arte, na letra. */
.contorno{transition:color 1.1s var(--ease) .1s,-webkit-text-stroke-color 1.1s var(--ease) .1s}
.js .contorno{color:transparent;-webkit-text-stroke:1.6px var(--roxo)}
.js.tatuado .contorno{color:var(--tinta);-webkit-text-stroke-color:transparent}

/* ---------- palco: abertura, ritual e a arte presa ao lado ---------- */
.palco{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,90px)}
.abertura{min-height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:center;padding:56px 0 72px}
.titulo-abertura{font-size:clamp(54px,7.2vw,122px);line-height:.95;letter-spacing:-.025em;margin-top:26px;max-width:9.5ch}
.abertura-p{font-size:clamp(17px,1.35vw,20px);color:var(--tinta2);max-width:40ch;margin-top:30px}
.acoes{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:38px}
.palco-arte{position:relative}
/* A folha fica presa ao lado do texto enquanto o ritual é lido: é CSS
   puro, a rolagem continua livre, e o desenho só acompanha. */
.folha-decalque{position:sticky;top:100px;margin:28px 0 64px;padding:clamp(22px,2.6vw,40px);background:var(--branco);box-shadow:var(--s2);
  transform:rotate(-1.1deg);display:flex;flex-direction:column;gap:14px;max-height:calc(100svh - 128px)}
.folha-rotulo{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta2)}
.folha-estado{color:var(--roxo);display:inline-flex;align-items:center;gap:8px}
.folha-estado::before{content:"";width:7px;height:7px;background:currentColor;border-radius:50%}
.folha-decalque.tatuando .folha-estado{color:var(--tinta)}
.folha-decalque.pronta .folha-estado{color:var(--tinta)}
.folha-decalque.pronta .folha-estado::before{border-radius:0}
.folha-medida{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--tinta3);text-align:right}
.canto{position:absolute;color:var(--tinta3)}
.canto .mira{width:18px;height:18px}
.canto .mira path{stroke:var(--roxo-linha)}
.c1{top:10px;left:10px}.c2{top:10px;right:10px}.c3{bottom:10px;left:10px}.c4{bottom:10px;right:10px}

.arte{width:100%;height:auto;max-height:calc(100svh - 250px);aspect-ratio:3/4;display:block;margin:0 auto;overflow:visible}
.arte path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.arte .estencil path{stroke:var(--roxo);stroke-width:2.1;opacity:.85;transition:opacity .6s ease}
.arte .tinta path{stroke:var(--tinta);stroke-width:1.55;stroke-dasharray:1;stroke-dashoffset:0}
.arte .pontos circle{fill:var(--tinta)}
/* Estado inicial da passagem: com JS a tinta espera a rolagem. Sem GSAP a
   classe sem-gsap devolve o desenho inteiro. */
.js .arte .tinta path{stroke-dashoffset:1}
.js .arte .pontos circle{opacity:0}
.sem-gsap .arte .tinta path{stroke-dashoffset:0}
.sem-gsap .arte .pontos circle{opacity:1}

.ritual{padding-bottom:12vh}
.passos{list-style:none}
.passo{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 20px;min-height:66vh;padding:40px 0;border-top:1px solid var(--linha)}
.passo-n{font-family:var(--display);font-size:46px;line-height:1;color:var(--tinta3);transition:color .4s ease}
/* O passo em andamento é roxo, o que já passou é tinta, o que vem é cinza. */
.passo.ativa .passo-n{color:var(--roxo)}
.passo.feita .passo-n{color:var(--tinta)}
.passo h3{font-size:clamp(34px,3.3vw,50px)}
.passo p{color:var(--tinta2);max-width:38ch;margin-top:16px;font-size:18px}
.passo-foto{margin-top:28px;width:min(300px,100%)}
.passo-foto img{aspect-ratio:4/3;object-fit:cover;border-radius:2px;filter:saturate(.9)}

@media(max-width:979px){
  .palco{display:flex;flex-direction:column;gap:0}
  .palco-txt{display:contents}
  .abertura{order:1;min-height:0;padding:44px 0 28px}
  .palco-arte{order:2}
  .ritual{order:3}
  .folha-decalque{position:relative;top:auto;max-height:none;margin:8px 4px 40px}
  .arte{max-height:none}
  .arte .estencil path{stroke-width:2.6}
  .arte .tinta path{stroke-width:2}
  .passo{min-height:0;grid-template-columns:56px minmax(0,1fr);padding:30px 0}
  .passo-n{font-size:36px}
}

/* ---------- escolas ---------- */
.escolas{background:var(--folha);padding:clamp(80px,10vw,150px) var(--gut)}
.escolas-cab{max-width:var(--maxw);margin:0 auto 56px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 40px}
.escolas-cab .rotulo{grid-column:1/-1}
.escolas-cab h2{font-size:clamp(42px,5.4vw,84px);max-width:13ch}
.escolas-lista{max-width:var(--maxw);margin:0 auto}
.escola{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.85fr) 180px;gap:28px 40px;align-items:start;
  padding:38px 0;border-top:1px solid var(--tinta)}
.escola:last-child{border-bottom:1px solid var(--tinta)}
.escola-nome{font-size:clamp(44px,5.4vw,80px);line-height:.92;transition:color .3s ease}
.escola:hover .escola-nome{color:var(--roxo)}
.escola-frase{font-weight:600;font-size:18px;margin-bottom:8px}
.escola-txt p:not(.escola-frase){color:var(--tinta2);max-width:44ch}
.ficha{display:grid;gap:12px}
.ficha div{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--linha)}
.ficha dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3)}
.ficha dd{font-family:var(--mono);font-size:14px;color:var(--tinta)}
.escola-foto img{aspect-ratio:4/5;object-fit:cover;border-radius:2px}
@media(max-width:1080px){
  .escola{grid-template-columns:minmax(0,1fr) 150px}
  .escola-nome{grid-column:1}
  .escola-foto{grid-column:2;grid-row:1/3}
  .escola-txt{grid-column:1}
  .ficha{grid-column:1/-1}
}
@media(max-width:560px){
  .escola{grid-template-columns:minmax(0,1fr) 104px;gap:18px 18px}
  .escolas-cab{grid-template-columns:1fr}
}

/* ---------- amostra do portfólio, em fundo de tinta ---------- */
.amostra{background:var(--tinta);color:var(--claro);padding:clamp(80px,10vw,150px) var(--gut)}
.amostra .rotulo{color:var(--claro2)}
.amostra-cab{max-width:var(--maxw);margin:0 auto 52px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 40px}
.amostra-cab .rotulo{grid-column:1/-1}
.amostra-cab h2{font-size:clamp(42px,5.4vw,84px)}
.mosaico{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.mosaico figure img{width:100%;object-fit:cover;border-radius:2px}
.mosaico figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--claro2);margin-top:10px}
.m1{grid-column:1/6;grid-row:1/3}.m1 img{aspect-ratio:3/4}
.m2{grid-column:6/9}.m2 img{aspect-ratio:3/4}
.m3{grid-column:9/13;margin-top:80px}.m3 img{aspect-ratio:4/5}
.m4{grid-column:6/10}.m4 img{aspect-ratio:4/3}
.m5{grid-column:10/13}.m5 img{aspect-ratio:3/4}
@media(max-width:860px){
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mosaico figure{grid-column:auto;grid-row:auto;margin-top:0}
  .m1{grid-column:1/-1}.m1 img{aspect-ratio:4/5}
  .m5{display:none}
}

/* ---------- cuidados depois ----------
   Linha do tempo de verdade: cada fase vem depois da outra, por isso leva
   marca em ordem. Estreita, porque é texto para ler com calma. */
.cuidados{max-width:980px;margin:0 auto;padding:clamp(90px,11vw,160px) var(--gut)}
.cuidados-cab h2{font-size:clamp(42px,5.2vw,78px);margin-top:16px;max-width:12ch}
.cuidados-cab p{color:var(--tinta2);margin-top:20px;max-width:46ch;font-size:18px}
.linha-tempo{list-style:none;margin-top:58px;position:relative}
.linha-tempo li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 36px;padding:26px 0 26px;border-top:1px solid var(--linha2);position:relative}
.linha-tempo li:last-child{border-bottom:1px solid var(--linha2)}
.quando{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding-top:4px;display:flex;align-items:center;gap:10px}
.quando::before{content:"";width:9px;height:9px;border:1.5px solid var(--tinta);border-radius:50%;flex:none}
.linha-tempo li:first-child .quando::before{background:var(--tinta)}
.linha-tempo p{max-width:54ch}
.cuidados-nota{margin-top:30px;font-size:15px;color:var(--tinta2);max-width:56ch}
@media(max-width:640px){.linha-tempo li{grid-template-columns:1fr}}

/* ---------- valores ---------- */
.valores{max-width:var(--maxw);margin:0 auto clamp(80px,9vw,130px);padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.valores div{display:flex;flex-direction:column;gap:10px;padding:34px 28px 34px 0;border-top:1.5px solid var(--tinta)}
.valores div + div{padding-left:28px;border-left:1px solid var(--linha)}
.valores b{font-family:var(--display);font-weight:400;font-size:clamp(44px,4.6vw,70px);line-height:1}
.valores span{color:var(--tinta2);max-width:24ch}
/* O cifrão do Gloock tem a haste tão fina que no tamanho grande o R$ vira
   "RS". A moeda vai na letra do texto, menor, e o número fica no Gloock. */
.valores b small{font-family:var(--sans);font-weight:600;font-size:.38em;margin-right:.18em;vertical-align:.95em;letter-spacing:0}
@media(max-width:720px){
  .valores{grid-template-columns:1fr}
  .valores div + div{padding-left:0;border-left:0}
}

/* ---------- chamada: a folha de decalque inteira ----------
   O único bloco todo roxo do site: é o pedido ainda em estêncil. */
.pedir{background:var(--roxo);color:var(--claro);position:relative}
.pedir::before,.pedir::after{content:"";position:absolute;width:44px;height:44px;
  background:linear-gradient(var(--linha-clara2),var(--linha-clara2)) center/1.5px 100% no-repeat,linear-gradient(var(--linha-clara2),var(--linha-clara2)) center/100% 1.5px no-repeat}
.pedir::before{top:24px;left:24px}.pedir::after{bottom:24px;right:24px}
.pedir-in{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,11vw,170px) var(--gut);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px 60px;align-items:end}
.pedir h2{font-size:clamp(42px,5.6vw,90px);max-width:14ch}
.pedir-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:20px;justify-self:end}
@media(max-width:860px){.pedir-in{grid-template-columns:1fr}.pedir-acoes{justify-self:start}}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha2)}
.rodape-in{max-width:var(--maxw);margin:0 auto;padding:56px var(--gut) 96px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px 60px}
.rodape-marca p{color:var(--tinta2);margin-top:16px;font-size:15px}
.rodape nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;align-content:start}
.rodape nav a{text-decoration:none;font-weight:500;font-size:15px}
.rodape nav a:hover{color:var(--roxo)}
.rodape-nota{grid-column:1/-1;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--tinta2);padding-top:22px;border-top:1px solid var(--linha)}
@media(max-width:720px){.rodape-in{grid-template-columns:1fr}}

/* O selo de conceito: discreto, fixo e sempre presente. Ninguém pode sair
   daqui achando que o estúdio existe. */
.selo-conceito{position:fixed;right:14px;bottom:14px;z-index:40;display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 9px;
  background:var(--tinta);color:var(--claro);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-decoration:none;border-radius:2px;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.selo-conceito .mira{width:15px;height:15px}
.selo-conceito .mira path{stroke:#9E8BFF}
.selo-conceito:hover{background:var(--roxo)}
@media(max-width:520px){.selo-longo{display:none}}

/* ---------- aviso de conceito ---------- */
.aviso{margin:auto;border:0;padding:0;background:none;max-width:min(520px,calc(100vw - 32px));color:var(--tinta)}
.aviso::backdrop{background:rgba(12,12,13,.55);backdrop-filter:blur(3px)}
.aviso[open]{animation:folhaEntra .35s var(--ease)}
.aviso-folha{background:var(--branco);padding:36px 34px 30px;box-shadow:var(--s3);position:relative}
.aviso-selo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--roxo)}
.aviso h2{font-size:34px;line-height:1.05;margin-top:18px}
.aviso p:not(.aviso-selo){color:var(--tinta2);margin-top:14px}
.aviso-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:26px}
.aviso .bt{white-space:normal;text-align:left;line-height:1.3;padding:16px 22px}
@keyframes folhaEntra{from{opacity:0;transform:translateY(14px) rotate(-.6deg)}to{opacity:1;transform:none}}

/* ---------- cabeçalho das páginas internas ---------- */
.pagina-cab{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,130px) var(--gut) clamp(48px,6vw,90px)}
.pagina-cab h1{font-size:clamp(52px,7vw,116px);line-height:.95;margin-top:22px;max-width:11ch}
.pagina-cab p:not(.rotulo){color:var(--tinta2);max-width:52ch;margin-top:26px;font-size:clamp(17px,1.3vw,19px)}
.pagina-cab-dupla{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px 60px;align-items:end}
.agulhas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-bottom:6px}
.agulhas figure{display:flex;flex-direction:column;gap:12px}
.agulhas svg{width:100%;height:auto;fill:var(--tinta)}
.agulhas .tubo{fill:none;stroke:var(--roxo-linha);stroke-width:.6;stroke-dasharray:1.4 1.4}
.agulhas figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--tinta2);border-top:1px solid var(--linha2);padding-top:10px}
.agulhas figcaption b{display:block;font-weight:400;color:var(--tinta);font-size:14px;margin-bottom:2px}
@media(max-width:900px){.pagina-cab-dupla{grid-template-columns:1fr}.agulhas{max-width:460px}}
.pagina-cab-curta{padding-bottom:clamp(30px,4vw,56px)}
.ancoras{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:40px}
.ancoras a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--linha2)}
.ancoras a:hover{color:var(--roxo);border-color:var(--roxo)}

/* ---------- estilos: cada escola em detalhe ---------- */
.escola-det{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,9vw,130px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:48px clamp(40px,6vw,110px);align-items:center;border-top:1px solid var(--tinta)}
.escola-det.inverte .det-txt{order:2}
.det-txt h2{font-size:clamp(40px,4.6vw,72px);margin-top:18px;max-width:12ch}
.det-p{color:var(--tinta2);margin-top:22px;max-width:46ch;font-size:18px}
.ficha-grande{margin-top:34px;max-width:520px}
.det-cuidado{margin-top:28px;padding:18px 0 0;border-top:1.5px solid var(--tinta);max-width:520px;font-size:16px}
.det-cuidado span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3);margin-bottom:6px}
.det-txt .bt{margin-top:34px}
.det-fotos{position:relative;padding:0 0 18% 0}
.df1 img{aspect-ratio:4/5;object-fit:cover;width:78%;margin-left:auto;border-radius:2px}
.df2{position:absolute;left:0;bottom:0;width:46%}
.df2 img{aspect-ratio:4/5;object-fit:cover;border:10px solid var(--papel);border-radius:2px}
.escola-det.inverte .df1 img{margin-left:0}
.escola-det.inverte .df2{left:auto;right:0}
@media(max-width:900px){
  .escola-det{grid-template-columns:minmax(0,1fr)}
  .escola-det.inverte .det-txt{order:0}
}

/* ---------- artistas: em linhas, como a lista das escolas ---------- */
.artistas{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,10vw,140px) var(--gut);border-top:1px solid var(--tinta)}
.artistas-cab h2{font-size:clamp(42px,5.2vw,80px);margin-top:16px}
.artistas-cab p{color:var(--tinta2);margin-top:18px;max-width:50ch}
.artistas-lista{list-style:none;margin-top:52px}
.artista{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.2fr) minmax(0,.9fr) auto;gap:16px 36px;align-items:center;padding:28px 0;border-top:1px solid var(--linha2)}
.artista:last-child{border-bottom:1px solid var(--linha2)}
.artista-mono{position:relative;width:96px;height:96px;display:grid;place-items:center}
.artista-mono .mira{position:absolute;inset:0;width:96px;height:96px;stroke-width:.7}
.artista-mono .mira path{stroke:var(--roxo-linha)}
.artista-mono b{font-family:var(--display);font-weight:400;font-size:46px;line-height:1;background:var(--papel);padding:0 6px}
.artista h3{font-size:44px}
.artista p{color:var(--tinta2)}
.artista-agenda{font-family:var(--mono);font-size:13px}
.artista-agenda span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3)}
@media(max-width:1000px){
  .artista{grid-template-columns:96px minmax(0,1fr);gap:8px 22px}
  .artista-mono{grid-row:1/5}
}

/* ---------- portfólio ---------- */
.filtro{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.filtro button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--linha2);background:none;border-radius:2px;
  font-weight:500;font-size:15px;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}
.filtro button b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--tinta3)}
.filtro button:hover{border-color:var(--roxo);color:var(--roxo)}
.filtro button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--claro)}
.filtro button[aria-pressed="true"] b{color:var(--claro2)}
.galeria{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);columns:3;column-gap:18px}
.peca{break-inside:avoid;margin:0 0 26px}
.peca[hidden]{display:none}
.peca.entra{animation:pecaEntra .5s var(--ease) both}
@keyframes pecaEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.peca-abrir{display:block;width:100%;padding:0;border:0;background:var(--folha);cursor:zoom-in;overflow:hidden;border-radius:2px}
.peca-abrir img{width:100%;transition:transform .7s var(--ease)}
.peca-abrir:hover img{transform:scale(1.03)}
.peca figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--tinta2);margin-top:10px}
.galeria-nota{max-width:var(--maxw);margin:10px auto clamp(80px,9vw,130px);padding:0 var(--gut);font-family:var(--mono);font-size:11.5px;color:var(--tinta3)}
@media(max-width:1100px){.galeria{columns:2}}
@media(max-width:640px){.galeria{columns:1}}
.ampliar{margin:auto;border:0;background:var(--branco);padding:20px 20px 24px;max-width:min(1100px,calc(100vw - 24px));box-shadow:var(--s3)}
.ampliar::backdrop{background:rgba(12,12,13,.82)}
.ampliar img{max-height:74vh;width:auto;max-width:100%;margin:0 auto}
.ampliar p{font-family:var(--mono);font-size:12.5px;margin:14px 0 16px;color:var(--tinta2)}
.ampliar-fechar{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;background:var(--branco);font-size:26px;line-height:1;cursor:pointer;z-index:2}

/* ---------- orçamento ---------- */
.pedido{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(70px,8vw,110px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:40px clamp(36px,5vw,90px);align-items:start}
.etapas{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:36px;counter-reset:e}
.etapas li{counter-increment:e;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3);display:flex;align-items:center;gap:8px}
.etapas li::before{content:counter(e);width:22px;height:22px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:11px}
.etapas li[aria-current="step"]{color:var(--roxo)}
.etapas li.feita{color:var(--tinta)}
.etapas li.feita::before{background:var(--tinta);color:var(--claro);border-color:var(--tinta)}
.etapa{border:0;display:flex;flex-direction:column;gap:26px}
.etapa[hidden]{display:none}
.etapa legend{font-family:var(--display);font-size:clamp(34px,3.4vw,48px);line-height:1;padding-bottom:22px}
.campo{display:flex;flex-direction:column;gap:10px;font-weight:500;font-size:15.5px}
.campo-rot{font-weight:500;font-size:15.5px}
.opcional{margin-left:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3);font-weight:400}
.campo input:not([type=range]),.campo textarea,.campo select{font:400 16px/1.5 var(--sans);color:var(--tinta);background:var(--branco);border:1px solid var(--linha2);
  border-radius:2px;padding:14px 15px;width:100%;transition:border-color .2s ease}
.campo textarea{resize:vertical;min-height:120px}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--roxo);box-shadow:0 0 0 3px var(--roxo-claro)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta3)}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcao{position:relative;cursor:pointer}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.opcao span{display:inline-block;padding:10px 15px;border:1px solid var(--linha2);border-radius:2px;font-weight:500;font-size:15px;background:var(--branco);
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.opcao:hover span{border-color:var(--roxo)}
/* A escolha feita mas não confirmada ainda é roxa, como o decalque. */
.opcao input:checked + span{border-color:var(--roxo);color:var(--roxo);background:var(--roxo-claro)}
.opcao input:focus-visible + span{outline:2px solid var(--roxo);outline-offset:2px}
.tamanho{display:flex;align-items:center;gap:20px}
.tamanho input{flex:1;accent-color:var(--roxo);height:28px}
.tamanho output{font-family:var(--display);font-size:42px;line-height:1;min-width:3.2ch;text-align:right}
/* A régua: a faixa de pele tem 40 cm, e a caixa tracejada é o decalque do
   tamanho escolhido. Centímetro sozinho ninguém imagina. */
.regua{margin-top:6px}
.regua-pele{position:relative;height:64px;background:linear-gradient(180deg,var(--pele),var(--pele2));border-radius:32px}
.regua-pele i{position:absolute;left:12px;top:50%;transform:translateY(-50%);height:44px;border:1.5px dashed var(--roxo);border-radius:4px;background:rgba(90,63,208,.06);
  transition:width .2s var(--ease);width:20%}
.regua-marcas{position:relative;height:30px;margin:0 12px}
.regua-marcas span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;color:var(--tinta3);padding-top:12px}
.regua-marcas span::before{content:"";position:absolute;top:2px;left:50%;width:1px;height:8px;background:var(--tinta2)}
.regua-marcas span:last-child::after{content:" cm"}
.tamanho-ref{font-family:var(--mono);font-size:13px;color:var(--tinta2)}
.marcar{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;cursor:pointer}
.marcar input{width:20px;height:20px;accent-color:var(--roxo);margin-top:2px;flex:none}
.form-erro{color:var(--erro);font-weight:500;font-size:15px;margin-top:20px}
.form-acoes{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding-top:26px;border-top:1px solid var(--linha2)}
.form-acoes .bt{margin-left:auto}
.ficha-pedido{position:sticky;top:100px;background:var(--branco);box-shadow:var(--s2);padding:34px 30px 28px;transform:rotate(.8deg)}
.ficha-pedido-tit{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
#estado-pedido{color:var(--roxo)}
#estado-pedido.pronto{color:var(--tinta)}
#resumo{margin-top:22px;display:flex;flex-direction:column}
#resumo div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--linha)}
#resumo dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3);padding-top:3px}
#resumo dd{font-size:15.5px;color:var(--roxo);text-decoration:underline dashed var(--roxo-linha);text-underline-offset:5px;
  transition:color .7s var(--ease),text-decoration-color .7s var(--ease);overflow-wrap:anywhere}
#resumo div.confirmado dd{color:var(--tinta);text-decoration-color:transparent}
.ficha-pedido-nota{margin-top:18px;font-size:13px;color:var(--tinta2)}
@media(max-width:900px){
  .pedido{grid-template-columns:1fr}
  .ficha-pedido{position:relative;top:auto;transform:none;order:-1}
}
.valores-curto{margin-top:0}
.duvidas{max-width:980px;margin:0 auto;padding:0 var(--gut) clamp(90px,10vw,150px)}
.duvidas h2{font-size:clamp(38px,4.4vw,64px);margin-bottom:34px}
.perguntas{border-top:1px solid var(--linha2)}
.perguntas details{border-bottom:1px solid var(--linha2)}
.perguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;
  font-family:var(--display);font-size:clamp(22px,2vw,28px);line-height:1.15}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary i{position:relative;width:16px;height:16px;flex:none}
.perguntas summary i::before,.perguntas summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1.6px;background:currentColor;transition:transform .3s var(--ease)}
.perguntas summary i::after{transform:rotate(90deg)}
.perguntas details[open] summary i::after{transform:rotate(0)}
.perguntas details p{color:var(--tinta2);padding:0 44px 26px 0;max-width:62ch}