/* Base de todas as páginas: tokens, reset, ambiente, navegação, botões, seções, perguntas, contato e rodapé. */
:root{
  --canvas:#0a0d14;
  --panel:#11161f;
  --panel-2:#182030;
  --accent:#d9b46a;
  --accent-hover:#f0d08e;
  --accent-muted:rgba(217,180,106,.18);
  --text-primary:#f1eee6;
  --text-secondary:#a3abbb;
  --line:rgba(241,238,230,.11);
  --display:'Archivo',sans-serif;
  --text:'Hanken Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(5,6,12,.95),0 3px 12px rgba(5,6,12,.78),0 10px 44px rgba(5,6,12,.8);
  --gutter:clamp(1.25rem,4vw,4rem);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scrollbar-color:#3a3220 var(--canvas)}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--text);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#0a0d14}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
/* O <picture> do eleventy-img não entra no layout: o <img> se comporta como se estivesse sozinho */
picture{display:contents}
a{color:inherit;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;padding:.75rem 1rem;background:var(--accent);color:#0a0d14;border-radius:6px;transition:top .3s var(--ease)}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2*var(--gutter),78rem);margin-inline:auto}
.mono{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}

/* Ambiente: poeira de estrelas que deriva atrás de tudo */
.ambiente{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambiente::before,.ambiente::after{content:"";position:absolute;inset:-50%;background-image:radial-gradient(1px 1px at 12% 18%,rgba(241,238,230,.5),transparent 60%),radial-gradient(1px 1px at 68% 34%,rgba(241,238,230,.35),transparent 60%),radial-gradient(1.5px 1.5px at 42% 72%,rgba(217,180,106,.45),transparent 60%),radial-gradient(1px 1px at 86% 82%,rgba(241,238,230,.3),transparent 60%),radial-gradient(1px 1px at 24% 56%,rgba(241,238,230,.25),transparent 60%);background-size:420px 420px;animation:deriva 120s linear infinite;animation-delay:-37s;opacity:.55}
.ambiente::after{background-size:690px 690px;animation-duration:180s;animation-delay:-80s;opacity:.35}
@keyframes deriva{to{transform:translate3d(-420px,-210px,0)}}
body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused!important}

/* Navegação */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .5s var(--ease),border-color .5s var(--ease);border-bottom:1px solid transparent}
.nav.solida{background:rgba(10,13,20,.86);backdrop-filter:blur(14px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem);height:4.5rem}
.nav .logo{margin-right:auto}
.nav .logo img{height:2rem;width:auto}
.menu{display:flex;align-items:center;gap:clamp(1rem,1.9vw,1.9rem);font-size:1rem}
.menu a{text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease)}
.menu a:hover,.menu a.ativo{color:var(--text-primary)}
.menu a[aria-current="page"]{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.5em}
/* Submenu de serviços: abre com o mouse ou pelo botão da seta (teclado e toque) */
.tem-sub{position:relative;display:flex;align-items:center;gap:.1rem}
.abre-sub{display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:4px;background:none;color:var(--text-secondary);cursor:pointer}
.abre-sub svg{transition:transform .3s var(--ease)}
.abre-sub[aria-expanded="true"] svg{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 1rem);left:-1rem;min-width:15.5rem;display:grid;padding:.45rem;border:1px solid var(--line);border-radius:.8rem;background:rgba(10,13,20,.97);box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-1.1rem;height:1.1rem}
.sub a{display:block;padding:.6rem .8rem;border-radius:.5rem}
.sub a:hover{background:var(--panel-2)}
.abre-sub[aria-expanded="true"]+.sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (hover:hover) and (min-width:961px){.tem-sub:hover .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}}
.menu-botao{display:none}
/* Celular e tablet: o menu vira um painel em tela cheia */
@media (max-width:960px){
  .menu-botao{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgba(241,238,230,.22);border-radius:999px;background:transparent;color:var(--text-primary);cursor:pointer}
  .menu-botao path{transition:transform .35s var(--ease);transform-origin:12px 12px}
  .nav.aberta .menu-botao .l1{transform:translateY(4.5px) rotate(45deg)}
  .nav.aberta .menu-botao .l2{transform:translateY(-4.5px) rotate(-45deg)}
  /* backdrop-filter faria o painel fixo se medir pela barra, e não pela tela */
  .nav.aberta{background:var(--canvas);border-color:var(--line);backdrop-filter:none}
  .menu{position:fixed;inset:4.5rem 0 0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gutter) 3rem;background:var(--canvas);overflow-y:auto;overscroll-behavior:contain}
  .nav.aberta .menu{display:flex}
  .menu>li{border-bottom:1px solid var(--line)}
  .menu>li>a{display:block;padding:1.05rem 0;font-family:var(--display);font-stretch:85%;font-weight:600;font-size:1.65rem;line-height:1.1;color:var(--text-primary)}
  .menu a[aria-current="page"]{text-decoration:none;color:var(--accent)}
  .tem-sub{flex-wrap:wrap}
  .tem-sub>a{flex:1}
  .abre-sub{width:2.75rem;height:2.75rem;color:var(--text-primary)}
  .sub{position:static;flex-basis:100%;min-width:0;display:none;padding:0 0 1rem;border:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .sub::before{content:none}
  .abre-sub[aria-expanded="true"]+.sub{display:grid}
  .sub a{padding:.6rem 0;font-size:1.0625rem;color:var(--text-secondary)}
  html.menu-aberto{overflow:hidden}
}
@media (max-width:400px){.nav .nav-cta{padding-inline:.85rem;font-size:.875rem}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.8rem 1.4rem;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#0a0d14!important;font-weight:600;text-decoration:none;text-shadow:none;cursor:pointer;transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:active{transform:scale(.98)}
.btn.vazado{background:transparent;color:var(--text-primary)!important;border-color:rgba(241,238,230,.28)}
.btn.vazado:hover{border-color:var(--accent);color:var(--accent)!important}
.btn svg{flex:none}
.nav .btn{min-height:2.5rem;padding:.45rem 1rem;font-size:.9375rem}
/* Em tela estreita o botão do menu usa o rótulo curto, para não quebrar em duas linhas */
.nav-cta{white-space:nowrap}.nav-cta .curto{display:none}
@media (max-width:400px){.nav-cta .longo{display:none}.nav-cta .curto{display:inline}}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* Seções */
main section:not(.hero){position:relative;padding-block:clamp(3.25rem,11vw,9rem)}
/* Âncoras não ficam escondidas atrás do menu fixo */
main section[id]{scroll-margin-top:3rem}
.cabeca{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,5vw,4rem);max-width:44rem}
.cabeca h2{font-family:var(--display);font-stretch:75%;font-weight:700;font-size:clamp(2.1rem,4.4vw,3.75rem);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.cabeca p{color:var(--text-secondary);font-size:1.125rem;max-width:44ch}
.entra{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.visto .entra{opacity:1;transform:none}
.visto .entra:nth-child(2){transition-delay:.08s}
.visto .entra:nth-child(3){transition-delay:.16s}
.visto .entra:nth-child(4){transition-delay:.24s}
.visto.assentado .entra{transition-delay:0s}

/* Perguntas */
.perguntas{max-width:52rem}
.perguntas details{border-top:1px solid var(--line)}
.perguntas details:last-child{border-bottom:1px solid var(--line)}
.perguntas summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 0;cursor:pointer;list-style:none;font-size:1.15rem;font-weight:500}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"";width:.7rem;height:.7rem;flex:none;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .4s var(--ease)}
.perguntas details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.perguntas details p{padding:0 0 1.5rem;color:var(--text-secondary);max-width:60ch}

/* Contato: o fecho */
.fecho{text-align:center}
.fecho .wrap{display:grid;justify-items:center;gap:1.5rem}
.fecho .estrela{width:4.5rem;filter:drop-shadow(0 0 24px rgba(217,180,106,.45));animation:brilho 5s var(--ease-io) infinite;animation-delay:-1.5s}
@keyframes brilho{50%{filter:drop-shadow(0 0 40px rgba(217,180,106,.7))}}
.fecho h2{font-family:var(--display);font-stretch:72%;font-weight:700;font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98;text-transform:uppercase;max-width:14ch}
.fecho .lead{color:var(--text-secondary);max-width:46ch;font-size:1.125rem}
form.pedido{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:min(100%,40rem);margin-top:1rem;text-align:left}
form.pedido label{display:grid;gap:.4rem;font-size:.9375rem;color:var(--text-secondary)}
form.pedido .largo{grid-column:1/-1}
form.pedido input,form.pedido select,form.pedido textarea{width:100%;min-height:3.1rem;padding:.75rem .9rem;border-radius:.6rem;border:1px solid rgba(241,238,230,.22);background:var(--panel);color:var(--text-primary);caret-color:var(--accent);transition:border-color .3s var(--ease)}
form.pedido input:focus-visible,form.pedido select:focus-visible,form.pedido textarea:focus-visible{outline:none;border-color:var(--accent)}
form.pedido button{grid-column:1/-1;justify-self:center;margin-top:.5rem}
.form-ok{min-height:1.5rem;color:var(--accent);font-size:1rem}
.canais{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.5rem}
.canais a{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-size:1rem;transition:border-color .3s var(--ease),color .3s var(--ease)}
.canais a:hover{border-color:var(--accent);color:var(--accent)}
.canais svg{color:var(--accent)}
@media (max-width:560px){form.pedido{grid-template-columns:minmax(0,1fr)}}

/* Rodapé */
.rodape{padding:clamp(3.5rem,7vw,5rem) 0 6.5rem;border-top:1px solid var(--line);color:var(--text-secondary);font-size:1rem}
.rodape-grade{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2.5rem 2rem}
.rodape h2{margin-bottom:1rem;font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary)}
.rodape .rodape-sub{margin-top:2rem}
.rodape ul{display:grid;gap:.65rem}
.rodape a{text-decoration:none;transition:color .3s var(--ease)}
.rodape a:hover{color:var(--accent)}
.rodape-marca img{height:1.75rem;width:auto;margin-bottom:1.25rem}
.rodape-marca p{max-width:32ch}
.rodape-estrela{margin-top:.75rem!important;color:var(--accent)}
.rodape-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line);font-size:.875rem}
.rodape summary{display:block;list-style:none}
.rodape summary::-webkit-details-marker{display:none}
@media (min-width:861px){.rodape summary{pointer-events:none}}
/* Celular: contato aberto logo depois da marca; os outros grupos viram sanfona */
@media (max-width:860px){
  .rodape-grade{grid-template-columns:minmax(0,1fr);gap:0}
  .rodape-marca{padding-bottom:2rem}
  .rodape-contato{grid-row:2;padding:1.75rem 0 2rem;border-top:1px solid var(--line)}
  .rodape-grupo{border-top:1px solid var(--line)}
  .rodape-empresa .rodape-grupo{border-bottom:1px solid var(--line)}
  .rodape summary{position:relative;padding:1.15rem 2rem 1.15rem 0;cursor:pointer}
  .rodape summary h2,.rodape .rodape-sub{margin:0}
  .rodape summary::after{content:"";position:absolute;right:.35rem;top:50%;width:.55rem;height:.55rem;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
  .rodape details[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
  .rodape-grupo ul{padding-bottom:1.5rem}
}
.rodape .nw{white-space:nowrap}

/* WhatsApp flutuante. Na home ele só aparece depois do hero, para não cobrir o vídeo. */
.zap{position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);z-index:40;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--accent);color:#0a0d14;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:opacity .4s var(--ease),transform .4s var(--ease),background-color .3s var(--ease)}
.zap:hover{background:var(--accent-hover)}
.zap.oculto{opacity:0;transform:translateY(12px) scale(.9);pointer-events:none}
html.menu-aberto .zap{display:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .entra{opacity:1;transform:none}
}

/* Obras: grade de fotos (home, páginas de serviço e serviços realizados) */
.obras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.obra{position:relative;overflow:hidden;border-radius:1rem;border:1px solid var(--line);background:var(--panel)}
.obra img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform 1.4s var(--ease)}
.obra:hover img{transform:scale(1.05)}
.obra figcaption{padding:1.25rem 1.4rem 1.5rem;display:grid;gap:.35rem}
.obra strong{font-family:var(--display);font-stretch:85%;font-weight:600;font-size:1.35rem}
.obra span{color:var(--accent);font-size:.9375rem}
.obra p{color:var(--text-secondary);font-size:1rem}
@media (max-width:860px){.obras{grid-template-columns:minmax(0,1fr)}}
.obra-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.obra-tags li{padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
/* Com estudo de caso, o cartão inteiro vira link */
.obra-estudo{margin-top:.6rem;color:var(--accent);font-weight:600;font-size:1rem;text-decoration:none}
.obra-estudo::after{content:"";position:absolute;inset:0;border-radius:inherit}
.obra:has(.obra-estudo):hover{border-color:rgba(217,180,106,.45)}
.ver-todos{margin-top:clamp(1.75rem,3vw,2.5rem)}

/* Sem JavaScript: o conteúdo aparece sem a animação de entrada e o botão de menu some (o rodapé tem todos os links) */
html:not(.js) .entra{opacity:1;transform:none}
html:not(.js) .menu-botao{display:none}

/* Região atendida: só no Sobre (partes/regiao.njk) */
.regiao{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.regioes li{display:flex;justify-content:space-between;align-items:baseline;padding:1.1rem 0;border-top:1px solid var(--line);font-family:var(--display);font-stretch:85%;font-size:1.5rem}
.regioes li:last-child{border-bottom:1px solid var(--line)}
.regioes strong{font-weight:600}
.regioes .mono{color:var(--accent)}
/* O mapa original é claro; invertido ele conversa com o fundo escuro */
.mapa{border-radius:1.25rem;overflow:hidden;border:1px solid var(--line);background:#0e1219}
.mapa img{width:100%;height:auto;filter:invert(1) brightness(.78) sepia(.25) hue-rotate(-12deg)}
@media (max-width:860px){.regiao{grid-template-columns:minmax(0,1fr)}.mapa{max-width:28rem}}

/* Declaração grande e lista de garantias com ✓: "Quem assina" no Sobre, páginas de serviço e loja física na home */
.confianca{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.declaracao{font-family:var(--display);font-stretch:70%;font-weight:700;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:.98;text-transform:uppercase}
.declaracao em{font-style:normal;color:var(--accent)}
.garantias li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:1rem;padding:1.25rem 0;border-top:1px solid var(--line)}
.garantias li:last-child{border-bottom:1px solid var(--line)}
.garantias svg{color:var(--accent);margin-top:.2rem}
.garantias b{display:block;font-weight:600}
.garantias span{color:var(--text-secondary);font-size:1rem}
@media (max-width:860px){.confianca{grid-template-columns:minmax(0,1fr)}}