/* ============================================================
   TRALUME — sistema visual do site
   Paleta: âmbar #D99C3C · grafite #2B2B2B · off-white #F5F1EA
   Tipografia: Montserrat (600 títulos, 400/500 texto)
   ============================================================ */

:root{
  --ambar:#D99C3C;
  --ambar-claro:#E9BB6B;
  --ambar-escuro:#B77E27;
  --grafite:#2B2B2B;
  --grafite-2:#222222;
  --off:#F5F1EA;
  --off-2:#ECE6DB;
  --linha:#DDD5C7;
  --texto:#3A362F;
  --texto-suave:#6E675C;
  --branco:#FFFFFF;
  --radius:14px;
  --sombra:0 10px 30px rgba(43,43,43,.10);
  --max:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  background:var(--off);
  color:var(--texto);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- tipografia ---------- */
h1,h2,h3{font-weight:600;line-height:1.18;color:var(--grafite);letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.13rem}
.eyebrow{
  display:inline-block;
  font-size:.74rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ambar-escuro);
  margin-bottom:14px;
}
.lead{font-size:1.08rem;color:var(--texto-suave);max-width:56ch}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:999px;
  font-weight:600;font-size:.95rem;letter-spacing:.02em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  cursor:pointer;border:0;
}
.btn:hover{transform:translateY(-2px)}
.btn-ambar{background:var(--ambar);color:var(--grafite-2);box-shadow:0 8px 22px rgba(217,156,60,.35)}
.btn-ambar:hover{background:var(--ambar-claro)}
.btn-escuro{background:var(--grafite);color:var(--off)}
.btn-escuro:hover{background:#3a3a3a}
.btn-contorno{border:1.5px solid var(--grafite);color:var(--grafite);background:transparent}
.btn-contorno:hover{background:var(--grafite);color:var(--off)}
.btn-contorno-claro{border:1.5px solid rgba(245,241,234,.55);color:var(--off);background:transparent}
.btn-contorno-claro:hover{background:var(--off);color:var(--grafite)}
.btn svg{flex:none}

/* ---------- navegação ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(245,241,234,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:70px;
}
.logo{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:.30em;font-size:1.02rem;color:var(--grafite)}
.logo svg{width:26px;height:26px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:.9rem;font-weight:500}
.nav-links a:not(.btn){color:var(--texto-suave);transition:color .15s}
.nav-links a:not(.btn):hover{color:var(--grafite)}
.nav-links .btn{padding:10px 20px;font-size:.85rem}
@media (max-width:720px){
  .nav-links a.so-desktop{display:none}
}

/* ---------- hero com persiana ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--grafite-2);
  color:var(--off);
}
.hero-luz{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 70% at 78% 18%, rgba(233,187,107,.34), transparent 60%),
    radial-gradient(ellipse 70% 60% at 12% 92%, rgba(217,156,60,.14), transparent 65%);
}
.hero-laminas{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}
.hero-laminas span{
  flex:1;background:var(--grafite-2);
  transform-origin:top;
  animation:abrir 1.15s cubic-bezier(.7,0,.2,1) forwards;
}
.hero-laminas span:nth-child(2){animation-delay:.07s}
.hero-laminas span:nth-child(3){animation-delay:.14s}
.hero-laminas span:nth-child(4){animation-delay:.21s}
.hero-laminas span:nth-child(5){animation-delay:.28s}
.hero-laminas span:nth-child(6){animation-delay:.35s}
@keyframes abrir{to{transform:scaleY(.14)}}
@media (prefers-reduced-motion:reduce){
  .hero-laminas span{animation:none;transform:scaleY(.14)}
}
.hero-inner{
  position:relative;z-index:2;
  padding:104px 0 96px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
}
.hero h1{color:var(--off)}
.hero h1 em{font-style:normal;color:var(--ambar-claro)}
.hero .lead{color:rgba(245,241,234,.78);margin:20px 0 34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{display:flex;justify-content:center}
.hero-art svg{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding:72px 0 64px}
  .hero-art{order:-1}
  .hero-art svg{max-width:250px}
}

/* ---------- faixa de prova ---------- */
.prova{border-bottom:1px solid var(--linha);background:var(--off)}
.prova-inner{
  display:flex;justify-content:space-between;gap:18px;
  padding:22px 0;flex-wrap:wrap;
}
.prova-item{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;color:var(--texto-suave)}
.prova-item svg{width:19px;height:19px;flex:none}

/* ---------- seções ---------- */
.secao{padding:88px 0}
.secao-head{max-width:640px;margin-bottom:52px}
.secao-escura{background:var(--grafite-2);color:var(--off)}
.secao-escura h2,.secao-escura h3{color:var(--off)}
.secao-escura .lead{color:rgba(245,241,234,.75)}
.secao-escura .eyebrow{color:var(--ambar)}

/* ---------- cards de serviço ---------- */
.grid-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.grid-serv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-serv{grid-template-columns:1fr}}
.card-serv{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--radius);
  padding:30px 26px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card-serv:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.card-serv .icone{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,var(--ambar) 0%,var(--ambar-claro) 100%);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.card-serv .icone svg{width:23px;height:23px}
.card-serv h3{margin-bottom:8px}
.card-serv p{font-size:.93rem;color:var(--texto-suave)}

/* ---------- dois andares ---------- */
.andares{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){.andares{grid-template-columns:1fr}}
.andar{
  border-radius:20px;padding:44px 38px;
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.andar .btn{margin-top:12px}
.andar-escuro{background:var(--grafite);color:var(--off)}
.andar-escuro h3{color:var(--off);font-size:1.45rem}
.andar-escuro p{color:rgba(245,241,234,.75)}
.andar-claro{background:var(--branco);border:1px solid var(--linha)}
.andar-claro h3{font-size:1.45rem}
.andar-claro p{color:var(--texto-suave)}
.andar .tag{
  font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
}
.andar-escuro .tag{background:rgba(217,156,60,.16);color:var(--ambar-claro)}
.andar-claro .tag{background:var(--off);color:var(--ambar-escuro);border:1px solid var(--linha)}

/* ---------- passos ---------- */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:passo}
@media (max-width:820px){.passos{grid-template-columns:1fr}}
.passo{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--radius);
  padding:30px 26px;position:relative;counter-increment:passo;
}
.secao-escura .passo{background:rgba(245,241,234,.05);border-color:rgba(245,241,234,.12)}
.passo::before{
  content:counter(passo,decimal-leading-zero);
  font-size:.8rem;font-weight:600;letter-spacing:.18em;color:var(--ambar-escuro);
  display:block;margin-bottom:14px;
}
.secao-escura .passo::before{color:var(--ambar)}
.passo h3{margin-bottom:8px}
.passo p{font-size:.93rem;color:var(--texto-suave)}
.secao-escura .passo p{color:rgba(245,241,234,.72)}
.passos-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.passos-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.passos-4{grid-template-columns:1fr}}

/* ---------- lista de itens (páginas internas) ---------- */
.lista-serv{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;margin-top:8px}
@media (max-width:700px){.lista-serv{grid-template-columns:1fr}}
.lista-serv li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--linha);
  font-size:.97rem;
}
.secao-escura .lista-serv li{border-color:rgba(245,241,234,.12)}
.lista-serv svg{width:20px;height:20px;flex:none;margin-top:3px}

/* ---------- produtos (projetos) ---------- */
.grid-prod{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.grid-prod{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-prod{grid-template-columns:1fr}}
.card-prod{
  border-radius:var(--radius);overflow:hidden;
  background:var(--branco);border:1px solid var(--linha);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card-prod:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.card-prod .visual{aspect-ratio:4/3;background:var(--off-2)}
.card-prod .visual svg{width:100%;height:100%}
.card-prod .info{padding:22px 24px 26px}
.card-prod .info p{font-size:.9rem;color:var(--texto-suave);margin-top:6px}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.faq details{
  border-bottom:1px solid var(--linha);
  padding:6px 0;
}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;font-weight:600;color:var(--grafite);font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:1.4rem;font-weight:400;color:var(--ambar-escuro);
  transition:transform .2s;flex:none;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--texto-suave);font-size:.97rem;max-width:64ch}

/* ---------- CTA final ---------- */
.cta-final{
  background:var(--grafite-2);position:relative;overflow:hidden;
}
.cta-final .hero-luz{opacity:.8}
.cta-final .wrap{position:relative;z-index:2;text-align:center;padding-top:92px;padding-bottom:92px}
.cta-final h2{color:var(--off);max-width:22ch;margin:0 auto 16px}
.cta-final p{color:rgba(245,241,234,.75);max-width:52ch;margin:0 auto 34px}

/* ---------- rodapé ---------- */
.rodape{background:var(--grafite-2);color:rgba(245,241,234,.6);border-top:1px solid rgba(245,241,234,.1)}
.rodape-inner{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:34px 0;font-size:.85rem;flex-wrap:wrap;
}
.rodape .logo{color:var(--off);font-size:.9rem;letter-spacing:.26em}
.rodape a:hover{color:var(--off)}
.rodape-links{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- botão flutuante WhatsApp ---------- */
.wa-flutuante{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .18s ease;
}
.wa-flutuante:hover{transform:scale(1.08)}
.wa-flutuante svg{width:30px;height:30px}

/* ---------- página interna: topo ---------- */
.topo-interno{
  background:var(--grafite-2);color:var(--off);
  position:relative;overflow:hidden;
}
.topo-interno .wrap{position:relative;z-index:2;padding-top:84px;padding-bottom:76px;max-width:800px}
.topo-interno h1{color:var(--off)}
.topo-interno h1 em{font-style:normal;color:var(--ambar-claro)}
.topo-interno .lead{color:rgba(245,241,234,.78);margin:18px 0 32px}


/* ---------- galeria de trabalhos ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.galeria{grid-template-columns:repeat(2,1fr)}}
.galeria .item{overflow:hidden;border-radius:12px;aspect-ratio:4/5;background:var(--off-2)}
.galeria-4 .item{aspect-ratio:1/1}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.galeria .item:hover img{transform:scale(1.05)}
.card-prod .visual img{width:100%;height:100%;object-fit:cover}

/* ---------- animação da persiana do hero ---------- */
.jl{transform-box:fill-box;transform-origin:center;animation:abrirlamina 1.1s cubic-bezier(.65,0,.25,1) forwards}
.jl:nth-of-type(1){animation-delay:.35s}
.jl:nth-of-type(2){animation-delay:.45s}
.jl:nth-of-type(3){animation-delay:.55s}
.jl:nth-of-type(4){animation-delay:.65s}
.jl:nth-of-type(5){animation-delay:.75s}
.jl:nth-of-type(6){animation-delay:.85s}
.jl:nth-of-type(7){animation-delay:.95s}
.jl:nth-of-type(8){animation-delay:1.05s}
@keyframes abrirlamina{from{transform:scaleY(1)}to{transform:scaleY(.30)}}
.janela-luz{animation:pulseluz 5.5s ease-in-out 2s infinite}
@keyframes pulseluz{0%,100%{opacity:1}50%{opacity:.82}}
@media (prefers-reduced-motion:reduce){
  .jl{animation:none;transform:scaleY(.30)}
  .janela-luz{animation:none}
}


/* ---------- hero com slideshow de fotos reais ---------- */
.hero-fotos{min-height:min(88vh,760px);display:flex;align-items:center}
.hero-slides{position:absolute;inset:0}
.hero-slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:heroslide 24s ease-in-out infinite;
}
.hero-slides img:nth-child(1){animation-delay:0s}
.hero-slides img:nth-child(2){animation-delay:6s}
.hero-slides img:nth-child(3){animation-delay:12s}
.hero-slides img:nth-child(4){animation-delay:18s}
@keyframes heroslide{
  0%{opacity:0}
  4%,25%{opacity:1}
  31%,100%{opacity:0}
}
.hero-sombra{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,24,24,.90) 0%,rgba(24,24,24,.68) 48%,rgba(24,24,24,.38) 100%);
}
@media (max-width:860px){
  .hero-sombra{background:linear-gradient(180deg,rgba(24,24,24,.82) 0%,rgba(24,24,24,.68) 100%)}
}
.hero-fotos .hero-luz{opacity:.55}
.hero-inner-solo{grid-template-columns:1fr;max-width:760px;margin:0 auto 0 0}
.hero-fotos .hero-inner{padding:120px 0 110px}
@media (max-width:860px){.hero-fotos .hero-inner{padding:84px 0 72px}}
.hero-fotos .hero-laminas span{animation:abrirfoto 1.15s cubic-bezier(.7,0,.2,1) forwards}
.hero-fotos .hero-laminas span:nth-child(2){animation-delay:.07s}
.hero-fotos .hero-laminas span:nth-child(3){animation-delay:.14s}
.hero-fotos .hero-laminas span:nth-child(4){animation-delay:.21s}
.hero-fotos .hero-laminas span:nth-child(5){animation-delay:.28s}
.hero-fotos .hero-laminas span:nth-child(6){animation-delay:.35s}
@keyframes abrirfoto{to{transform:scaleY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .hero-slides img{animation:none}
  .hero-slides img:first-child{opacity:1}
  .hero-fotos .hero-laminas{display:none}
}

/* ---------- topo interno com foto ---------- */
.topo-foto{position:absolute;inset:0}
.topo-foto img{width:100%;height:100%;object-fit:cover}
.topo-veu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,24,24,.92) 0%,rgba(24,24,24,.72) 55%,rgba(24,24,24,.45) 100%)}
.topo-interno .hero-luz{opacity:.5}

/* correção: título do cartão claro dentro de seção escura */
.secao-escura .andar-claro h3{color:var(--grafite)}
.secao-escura .andar-claro p{color:var(--texto-suave)}


/* ---------- ajustes de navegação no celular ---------- */
.btn{white-space:nowrap}
@media (max-width:720px){
  .nav-inner{height:60px;gap:10px}
  .logo{letter-spacing:.18em;font-size:.9rem;gap:8px}
  .logo svg{width:22px;height:22px;flex:none}
  .nav-links{gap:12px}
  .nav-links .btn{padding:9px 16px;font-size:.8rem}
  .btn-longo{display:none}
  .hero-ctas .btn{width:100%;justify-content:center}
}

/* correção: respiro lateral da capa da home (o padding vertical estava zerando o lateral) */
.hero-fotos .hero-inner{padding:120px 24px 110px}
@media (max-width:860px){
  .hero-fotos .hero-inner{padding:84px 24px 72px}
}


/* ---------- correções de respiro lateral (faixa de prova e rodapé) ---------- */
.prova-inner{padding:22px 24px}
.rodape-inner{padding:34px 24px}

/* ---------- capa no celular: conteúdo mais para cima ---------- */
@media (max-width:860px){
  .hero-fotos .hero-inner{padding:46px 24px 64px}
}

/* ---------- ícones sociais do rodapé ---------- */
.rodape-links{align-items:center}
.rodape-links .social{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgba(245,241,234,.35);
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(245,241,234,.85);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.rodape-links .social svg{width:20px;height:20px}
.rodape-links .social:hover{
  background:var(--ambar);border-color:var(--ambar);
  color:var(--grafite-2);transform:translateY(-2px);
}