/* ============ SISTEMA PERLA · páginas de projeto (/obras/{slug}) ============ */
/* Tokens e nav/footer/botão são os mesmos do index.html — copiados aqui porque o site não usa
   build step nem CSS compartilhado por import; qualquer mudança de marca no index.html precisa
   ser replicada aqui manualmente (ver CLAUDE.md / PROGRESS.md). */
:root{
  color-scheme: light;
  /* Tema claro (redesign 26/09) — mesmo pivô do index.html: os nomes --onix/--perola foram
     mantidos, só os VALORES viraram os do tema claro. Ver .lightbox mais abaixo, que re-declara
     esses tokens localmente para continuar escura de propósito (visualização de foto em tela
     cheia) — é o único componente desta folha que precisa disso. */
  --onix:#F4EEE6; --onix-2:#FFFDF8;
  --perola:#231A17; --perola-2:#5C4F46; --perola-3:#6F6156;
  --ouro:#C2A56E; --ouro-deep:#9C8A5E;
  --linha:rgba(35,26,23,.14); --linha-2:rgba(35,26,23,.22);
  /* Papel/tinta (mesmos tokens, agora iguais a --onix/--perola) */
  --papel:#F4EEE6; --tinta:#231A17; --tinta-2:#5C4F46; --linha-p:rgba(35,26,23,.14); --ouro-paper:#8F7442; --ouro-paper-texto:#7A6237; /* variante escurecida p/ texto pequeno (4.5:1 em --papel) */
  --display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --num:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --gutter:clamp(20px,5vw,72px);
  --max:1240px;
  --fs-support:15.5px;
  --fs-meta:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--onix);color:var(--perola);font-family:var(--display);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance;letter-spacing:-.015em}
img{max-width:100%;display:block}
.shell{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--perola);font-weight:500}
.label.dim{color:var(--perola-3)}
.it{font-family:var(--num);font-style:italic;font-weight:400;color:var(--ouro);letter-spacing:0}
.dot{color:var(--ouro)}
:focus-visible{outline:1px solid var(--ouro);outline-offset:4px}

/* ============ NAV (idêntico ao index.html) ============ */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(244,238,230,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark img{width:40px;height:40px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.wordmark .txt{display:grid;line-height:1;gap:3px}
.wordmark b{font-weight:600;font-size:22px;letter-spacing:.14em;background:linear-gradient(180deg,var(--ouro-paper-texto),#4A3B24 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .sub{font-size:10px;letter-spacing:.42em;color:var(--perola-3);text-transform:lowercase}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--perola-2)}
.nav ul a{transition:color .3s ease}
.nav ul a:hover{color:var(--perola)}
.btn{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:15px 22px;border:1px solid var(--ouro);color:var(--perola);transition:background .35s ease,color .35s ease}
.btn:hover{background:var(--ouro);color:var(--tinta)}
.btn.solid{background:var(--ouro);color:var(--tinta)}
.btn.solid:hover{background:var(--perola)}
.btn .arr{font-family:var(--num);font-style:italic;font-size:18px;letter-spacing:0;text-transform:none}
.link{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--perola-2);border-bottom:1px solid var(--linha-2);padding-bottom:4px;transition:color .3s ease,border-color .3s ease}
.link:hover{color:var(--perola);border-color:var(--ouro)}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;padding:0;margin:0;background:none;border:0;cursor:pointer;flex:0 0 auto}
.nav-burger span{display:block;width:20px;height:1.5px;background:var(--perola);transition:transform .3s cubic-bezier(.2,.7,.1,1),opacity .25s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-mobile{display:none;position:fixed;left:0;right:0;top:73px;bottom:0;z-index:9;background:rgba(14,13,12,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:8px var(--gutter) 32px;overflow-y:auto}
.nav-mobile.open{display:block}
.nav-mobile ul{display:block;list-style:none;margin:0;padding:0}
.nav-mobile li{border-bottom:1px solid var(--linha)}
.nav-mobile ul a{display:block;padding:20px 2px;font-family:var(--display);font-size:clamp(22px,6vw,28px);color:#EFE7D6}
.nav-mobile .btn{margin-top:28px;justify-content:center;width:100%}
body.nav-open{overflow:hidden}
@media (max-width:900px){.nav>.shell>ul,.nav>.shell>.btn{display:none}.nav-burger{display:flex}}
@media (max-width:480px){.nav .btn{padding:11px 14px;font-size:10px;letter-spacing:.18em}}

/* ============ TOPO DO PROJETO ============ */
.obra-topo{padding-block:clamp(40px,6vw,64px) clamp(32px,5vw,48px)}
.obra-topo .voltar{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px}
.obra-topo h1{font-size:clamp(34px,5.4vw,64px);line-height:1.04;margin-top:14px}
.obra-topo .t{display:block;margin-top:18px;font-size:var(--fs-meta);letter-spacing:.24em;text-transform:uppercase;color:var(--perola-3)}
.obra-topo .resumo{margin-top:22px;max-width:56ch;color:var(--perola-2);font-size:var(--fs-support)}

/* ============ LINHA DO TEMPO ============ */
.timeline{display:flex;flex-wrap:wrap;gap:10px 28px;padding-block:22px;border-block:1px solid var(--linha)}
.timeline button{background:none;border:0;padding:0;margin:0;cursor:pointer;font-family:var(--display);color:var(--perola-3);font-size:15px;display:inline-flex;align-items:center;gap:8px;transition:color .3s ease}
.timeline button::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.timeline button:hover{color:var(--ouro)}

/* ============ GALERIA POR ETAPA ============ */
/* Todas as fotos de cada etapa ficam na própria página, sempre visíveis — nada aqui depende de
   clique nem de animação para aparecer (a revelação ao rolar é usada só em outras seções do site,
   nunca na galeria: script lento, bloqueado ou com erro nunca pode deixar uma foto invisível). */
.etapa-bloco{padding-block:clamp(40px,5vw,56px);border-bottom:1px solid var(--linha);scroll-margin-top:104px}
.etapa-bloco:last-of-type{border-bottom:0}
.etapa-bloco h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:28px}

/* Comparador antes/depois: só existe quando o manifest declara duas fotos da mesma cena
   (mesmo post, mesmo ângulo) — nunca forçado quando as fotos disponíveis não combinam de verdade. */
.comparador-secao{padding-block:clamp(40px,5vw,56px);border-bottom:1px solid var(--linha)}
.comparador-secao h2{font-size:clamp(22px,2.6vw,30px)}
.comp-legenda-topo{margin-top:12px;color:var(--perola-2);font-size:var(--fs-support);max-width:60ch}
.comp-frame{position:relative;margin-top:28px;aspect-ratio:3/2;max-width:900px;overflow:hidden;border:1px solid var(--linha);--pos:50%}
.comp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none;pointer-events:none}
.comp-antes{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.comp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--ouro);pointer-events:none}
.comp-handle::before{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;border-radius:50%;background:var(--ouro);transform:translate(-50%,-50%)}
.comp-label{position:absolute;top:16px;padding:5px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:rgba(14,13,12,.55);color:#EFE7D6;pointer-events:none}
.comp-label-antes{left:16px}
.comp-label-depois{right:16px}
.comp-slider{width:100%;max-width:900px;display:block;margin:18px 0 0;appearance:none;height:4px;background:var(--linha-2);border-radius:999px;outline-offset:6px}
.comp-slider::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ouro);border:3px solid var(--onix);cursor:ew-resize}
.comp-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ouro);border:3px solid var(--onix);cursor:ew-resize}
@media (max-width:600px){.comp-label{top:10px;font-size:10px;padding:4px 9px}}

/* Grade responsiva real: até 3 colunas no desktop, 2 no tablet, 1 no celular — número de colunas
   por bloco nunca passa do número de fotos daquele bloco (uma foto sozinha não fica esticada numa
   grade de 3, nem encolhida numa coluna estreita cercada de vazio). `cols-N` é calculado no gerador
   a partir de min(fotos.length, 3). */
.etapa-grid{display:grid;gap:clamp(16px,2.4vw,28px);justify-items:stretch}
.etapa-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.etapa-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.etapa-grid.cols-1{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
@media (max-width:900px){.etapa-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.etapa-grid.cols-3,.etapa-grid.cols-2{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

.etapa-grid figure{margin:0}
.etapa-grid .frame{position:relative;background:var(--onix-2);border:1px solid var(--linha);display:block}
.etapa-grid img{width:100%;height:auto;cursor:zoom-in;display:block}
.etapa-grid img:focus-visible{outline:2px solid var(--ouro);outline-offset:-2px}
.etapa-grid figcaption{margin-top:10px;font-size:var(--fs-meta);color:var(--perola-3)}
.selo{position:absolute;top:12px;left:12px;z-index:2;background:rgba(14,13,12,.86);border:1px solid var(--ouro);color:var(--ouro);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px}
.selo.entregue{left:auto;right:12px;border-color:var(--linha-2);color:var(--perola-2)}

/* Etapas com fotos pequenas na origem (frame de vídeo/Instagram, <=480px de largura, como a Rua
   Andaluzita): nunca ampliar além do tamanho real. Layout flex + centralizado em vez de grid, para
   1 ou 2 fotos nunca sobrarem "sozinhas à esquerda com vazio ao lado" — o próprio flex-wrap resolve
   isso naturalmente, qualquer que seja a quantidade. */
.etapa-grid.mini{display:flex;flex-wrap:wrap;justify-content:center}
/* Tamanho o mais próximo possível do original (a var(--fw), setada por foto, é a largura real do
   arquivo) — nunca amplia além disso. 340px é só o ponto de partida do flex antes do cap. */
.etapa-grid.mini figure{flex:0 1 340px;max-width:min(100%,var(--fw,340px))}

/* ============ CTA FINAL ============ */
.obra-cta{padding-block:clamp(48px,6vw,72px);text-align:center;border-top:1px solid var(--linha)}
.obra-cta h2{font-size:clamp(28px,4vw,44px)}
.obra-cta .btn{margin-top:28px}

/* ============ NAV PROJETO ANTERIOR / PRÓXIMO ============ */
.obra-prox{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linha)}
.obra-prox a{padding:clamp(24px,4vw,40px) var(--gutter);transition:background .3s ease}
.obra-prox a:hover{background:var(--onix-2)}
.obra-prox a:last-child{text-align:right;border-left:1px solid var(--linha)}
.obra-prox .lbl{display:block;font-size:var(--fs-meta);letter-spacing:.2em;text-transform:uppercase;color:var(--perola-3);margin-bottom:8px}
.obra-prox .tt{font-size:clamp(18px,2.4vw,24px)}
@media (max-width:600px){.obra-prox{grid-template-columns:1fr}.obra-prox a:last-child{border-left:0;border-top:1px solid var(--linha);text-align:left}}

/* ============ LIGHTBOX (continua escura de propósito — visualização de foto em tela cheia) ============ */
.lightbox{--onix:#0E0D0C;--onix-2:#141210;--perola:#EFE7D6;--perola-2:#B3A994;--perola-3:#89806F;--linha:rgba(239,231,214,.10);--linha-2:rgba(239,231,214,.18);
  position:fixed;inset:0;z-index:50;display:none;background:rgba(14,13,12,.97);backdrop-filter:blur(6px)}
.lightbox.open{display:flex;align-items:center;justify-content:center}
.lightbox figure{margin:0;max-width:min(94vw,1100px);max-height:88vh;text-align:center}
.lightbox img{max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto;object-fit:contain}
.lightbox figcaption{margin-top:14px;color:var(--perola-2);font-size:var(--fs-support)}
.lightbox figcaption .etapa{color:var(--perola-3);text-transform:uppercase;letter-spacing:.2em;font-size:var(--fs-meta);display:block;margin-top:4px}
.lightbox .fechar,.lightbox .seta{position:absolute;background:none;border:0;color:var(--perola);cursor:pointer;padding:14px;font-family:var(--num);font-style:italic}
.lightbox .fechar{top:8px;right:8px;font-size:28px}
.lightbox .seta{top:50%;transform:translateY(-50%);font-size:40px}
.lightbox .seta.prev{left:4px}
.lightbox .seta.next{right:4px}
.lightbox .contador{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:var(--fs-meta);color:var(--perola-3);letter-spacing:.1em}
@media (max-width:600px){.lightbox .seta{font-size:30px;padding:10px}}

/* ============ FAIXA DE CONTATO + RODAPÉ (tema claro — idêntico ao index.html) ============ */
.paper{background:var(--papel);color:var(--tinta)}
.cta-contato{text-align:left;padding-block:clamp(48px,6vw,72px)}
.cta-contato h2{font-size:clamp(28px,4vw,44px);line-height:1.1;max-width:16ch;color:var(--tinta)}
.cta-contato p{color:var(--tinta-2);max-width:48ch;margin-top:18px;font-size:var(--fs-support)}
.cta-contato .ctas{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:32px}
.btn-contato{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;padding:17px 28px;min-height:44px;border-radius:2px;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease}
.btn-contato svg{width:20px;height:20px;flex:0 0 auto}
.btn-contato.principal{background:var(--ouro-paper);color:#FFFDF8;border:1px solid var(--ouro-paper)}
.btn-contato.principal:hover{background:#7A6237;box-shadow:0 6px 18px rgba(35,26,23,.18);transform:translateY(-1px)}
.btn-contato:active{transform:translateY(0);box-shadow:none}
.btn-contato:focus-visible{outline:2px solid var(--ouro-paper);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn-contato{transition:none}.btn-contato:hover{transform:none}}

footer.rodape-claro{padding-block:56px 28px;border-top:1px solid var(--linha-p)}
footer.rodape-claro .shell{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:48px}
.footer-titulo{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);font-weight:600;margin-bottom:16px}
.rodape-marca .wordmark-lg{display:flex;align-items:center;gap:14px}
.rodape-marca .wordmark-lg img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--linha-p)}
.rodape-marca .wordmark-lg b{font-family:var(--display);font-weight:600;font-size:21px;color:var(--tinta)}
.rodape-marca p{margin-top:16px;max-width:32ch;font-size:var(--fs-support);color:var(--tinta-2)}

.rede-cards{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px){.rede-cards{grid-template-columns:1fr 1fr}}
.rede-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--linha-p);background:#FFFDF8;transition:border-color .2s ease,transform .15s ease,box-shadow .2s ease}
.rede-card:hover{border-color:var(--ouro-paper);box-shadow:0 6px 18px rgba(35,26,23,.08);transform:translateY(-1px)}
.rede-card:focus-visible{outline:2px solid var(--ouro-paper);outline-offset:2px}
.rede-card:active{transform:translateY(0)}
.rede-icon{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--papel);display:flex;align-items:center;justify-content:center;color:var(--ouro-paper)}
.rede-icon svg{width:24px;height:24px}
.rede-info{flex:1 1 auto;min-width:0}
.rede-info b{display:block;font-size:14px;color:var(--tinta)}
.rede-info span{display:block;font-size:12.5px;color:var(--tinta-2);margin-top:2px}
.rede-seta{flex:0 0 auto;font-family:var(--num);font-style:italic;font-size:19px;color:var(--ouro-paper);transition:transform .2s ease}
.rede-card:hover .rede-seta{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.rede-card,.rede-seta{transition:none}.rede-card:hover{transform:none}.rede-card:hover .rede-seta{transform:none}}

.contato-linha{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--tinta);font-size:14.5px;transition:color .2s ease}
.contato-linha:hover{color:var(--ouro-paper-texto)}
.contato-linha .contato-icon{flex:0 0 auto;width:20px;height:20px;color:var(--ouro-paper)}
.endereco-bloco{display:flex;gap:12px;margin-top:12px;color:var(--tinta-2);font-size:var(--fs-support)}
.endereco-bloco .contato-icon{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--ouro-paper)}
.endereco-bloco address{font-style:normal}
.como-chegar{display:inline-block;margin-top:8px;margin-left:32px;font-size:12.5px;letter-spacing:.06em;color:var(--ouro-paper-texto);border-bottom:1px solid transparent;transition:border-color .2s ease}
.como-chegar:hover{border-color:var(--ouro-paper-texto)}

footer.rodape-claro .legal{grid-column:1/-1;border-top:1px solid var(--linha-p);margin-top:32px;padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px;color:var(--tinta-2)}
@media (max-width:900px){footer.rodape-claro .shell{grid-template-columns:1fr 1fr;row-gap:36px}.rodape-marca{grid-column:1/-1}}
@media (max-width:560px){footer.rodape-claro .shell{grid-template-columns:1fr}}

.barra-contato-mobile{display:none}
@media (max-width:640px){
  .barra-contato-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--papel);border-top:1px solid var(--linha-p);padding:10px 16px env(safe-area-inset-bottom,10px)}
  .barra-contato-mobile a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;background:var(--ouro-paper);color:#FFFDF8;font-size:14px;font-weight:500}
  .barra-contato-mobile svg{width:18px;height:18px}
  body.tem-barra-contato{padding-bottom:64px}
  body.esconder-barra-contato .barra-contato-mobile{display:none}
}

/* reveal ao rolar — mesmo mecanismo do index.html. Nunca usado na galeria de fotos (ver acima):
   só em blocos decorativos onde, mesmo que o JS falhe, o noscript abaixo garante que o conteúdo
   nunca fica permanentemente invisível. */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.1,1),transform .7s cubic-bezier(.2,.7,.1,1)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}