
/* ===== CORES: muda aqui e o site todo muda ===== */
:root{--pedra:#EFEBE5;--tinta:#35201A;--noite:#34211A;--areia:#E4DAD2;--lima:#D2A878;--castanho:#8B5A3B;--cinza:#6B5F58;--linha:#D9D1C7;
--display:"Outfit",system-ui,sans-serif;--texto:"Outfit",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:var(--texto);background:var(--pedra);color:var(--tinta);line-height:1.6;font-size:17px}
a{color:inherit}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.escuro :focus-visible,.hero :focus-visible{outline-color:var(--lima)}
.wrap{max-width:1326px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.015em}
h2{font-size:clamp(2rem,3.9vw,3.1rem);line-height:1;text-transform:uppercase;margin-bottom:16px}
.lead{max-width:56ch;color:var(--cinza);font-size:1.08rem}
section{padding:96px 0}
.etq{display:block;font-weight:400;font-size:1.05rem;text-transform:uppercase;color:inherit;margin-bottom:22px}
.escuro{background:var(--noite);color:var(--pedra)}
.escuro .lead{color:#B9AEA3}

.btn{display:inline-block;padding:15px 30px;border-radius:2px;font:inherit;font-weight:500;text-decoration:none;cursor:pointer;border:0;background:var(--tinta);color:var(--pedra);transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.lima{background:var(--castanho);color:#fff}
/* Fotos: marcador em madeira. Para pôr uma foto: <img src="imagens/nome.jpg" alt="..."> dentro do .ph */
.ph{position:absolute;inset:0;overflow:hidden;background:repeating-linear-gradient(92deg,rgba(255,255,255,.07) 0 2px,transparent 2px 12px),linear-gradient(135deg,#8E6B45,#4F3A25);background-size:cover;background-position:center;transition:filter .5s}
.ph::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;font-size:.82rem;font-weight:700;background:rgba(239,235,229,.92);color:var(--tinta);padding:4px 12px;border-radius:2px}
.ph:has(img)::after{display:none}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.caixa{position:relative;border-radius:2px;overflow:hidden;background: rgba(244, 244, 240, .85);}
.caixa:hover .ph img{transform:scale(1.06)}
.caixa:hover .ph{filter:brightness(1.12)}

/* Aparecer ao fazer scroll */
.js .rev{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rev.on{opacity:1;transform:none}
.js .processo .rev,.js .perguntas-frequentes .rev{transform:none}

/* Secções complementares */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
.passo{position:relative;padding-top:26px;border-top:2px solid var(--tinta)}
.passo::before{content:"";position:absolute;top:-9px;left:0;width:16px;height:16px;border:2px solid var(--tinta);border-radius:50%;background:var(--lima)}
.passo h3{font-size:1.4rem;margin-bottom:8px}
.passo p{color:var(--cinza);font-size:.97rem}
.processo{background:var(--areia)}
.perguntas-frequentes{background:var(--areia)}
.processo-cab{max-width:780px;margin:0 auto;text-align:center}
.processo-cab .etq{color:#76553A}
.processo-cab .lead{margin:20px auto 0}
.processo-etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin-top:64px;list-style:none}
.processo-etapa{position:relative;text-align:center}
.processo-etapa:not(:last-child)::after{content:"→";position:absolute;top:23px;right:-27px;color:#76553A;font-size:1.55rem}
.processo-icone{display:grid;width:80px;height:80px;margin:0 auto 18px;place-items:center;border-radius:50%;background-color:#76553A;background-image:repeating-linear-gradient(4deg,transparent 0 7px,rgba(239,225,205,.1) 7px 8px,transparent 8px 13px),linear-gradient(125deg,#8A6A49,#62452F 55%,#806044);color:#fff}
.processo-icone svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.processo-etapa h3{margin-bottom:10px;font-size:1.2rem;text-transform:uppercase}
.processo-etapa p{max-width:29ch;margin:0 auto;color:var(--cinza);font-size:.97rem;line-height:1.75}
.faixa{padding:130px 0;text-align:center;color:var(--pedra);background:linear-gradient(rgba(30,21,15,.72),rgba(30,21,15,.72)),url("imagens/oficina.jpg") center/cover,linear-gradient(135deg,#6a4d33,#2a1f16);background-attachment:scroll,fixed,scroll}
.faixa h2{max-width:16ch;margin:0 auto 28px;font-size:clamp(2.2rem,6vw,4.6rem)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
details{border-bottom:1px solid var(--linha)}
details:first-of-type{border-top:1px solid var(--linha)}
summary{display:flex;justify-content:space-between;gap:20px;list-style:none;padding:22px 0;font-size:1.08rem;font-weight:700;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;line-height:1;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{max-width:60ch;padding:0 0 22px;color:var(--cinza)}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.blog .caixa{aspect-ratio:4/3;margin-bottom:16px}
.blog small{color:var(--cinza);font-size:.88rem}
.blog h3{font-size:1.35rem;margin:4px 0 6px}
.blog p{color:var(--cinza);font-size:.96rem}

@media (max-width:900px){
  section{padding:64px 0}
  .faq-grid{grid-template-columns:1fr;gap:20px}
  .passos{grid-template-columns:repeat(2,1fr)}
  .processo-etapas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px;margin-top:48px}
  .processo-etapa::after{display:none}
  .faixa{background-attachment:scroll}
  .blog{grid-template-columns:1fr}
}
@media (max-width:600px){
  .passos{grid-template-columns:1fr}
  .processo-etapas{grid-template-columns:1fr;row-gap:36px}
  .processo-icone{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rev{opacity:1;transform:none;transition:none}
  .btn,.ph,.ph img{transition:none}
}

.ph[data-label=""]::after{display:none}
.topo{position:fixed;right:22px;bottom:78px;z-index:30;width:42px;height:42px;border:0;border-radius:50%;background:var(--castanho);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.topo.v{opacity:1;visibility:visible}
.topo::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border:solid #fff;border-width:2px 0 0 2px;transform:translate(-50%,-30%) rotate(45deg)}
