/* Gráfica J2D — herda o design system do site atual: fundo preto, magenta (primário), ciano (secundário), Inter, cantos suaves. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2")}

:root{
  --bg:#000;--card:#0a101d;--line:#1a2338;--line-2:#2b3852;
  --text:#fff;--soft:#d4d4d4;--muted:#9a9a9a;
  --blue:#2563eb;--blue-2:#1d4ed8;--cyan:#20d3ee;--on-blue:#fff;--navy:#06122e;
  --r:12px;--r-sm:8px;--gut:clamp(16px,4vw,32px);--max:1160px;--head:64px;
  color-scheme:dark;
  scrollbar-color:#3a3a3a #000;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.6 Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--blue)}
img{display:block;max-width:100%;height:auto}
a{color:var(--cyan);text-underline-offset:.2em}
a:hover{color:#7ee8f7}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue);color:#fff}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--blue);color:#fff;padding:8px 14px;border-radius:var(--r-sm);font-weight:700;z-index:100}
.skip:focus{left:8px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;border:1px solid transparent;font:700 1rem/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
.btn-primary{background:var(--blue);color:var(--on-blue)}
.btn-primary:hover{background:var(--blue-2);color:var(--on-blue)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.9rem}

/* cabeçalho */
.head{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.94);border-bottom:1px solid var(--line);height:var(--head)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:-.01em}
.brand img{width:44px;height:44px}
.nav{display:none;gap:26px}
.nav a{color:var(--soft);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{color:var(--cyan)}
@media(min-width:820px){.nav{display:flex}}

/* seções */
section{padding-block:clamp(48px,8vw,96px)}
.sec-head{display:grid;gap:10px;margin-bottom:clamp(24px,4vw,40px);max-width:44rem}
.sec-head h2{font-size:clamp(1.6rem,4.2vw,2.5rem);font-weight:800}
.sec-head p{color:var(--muted)}
.lead{color:var(--soft);font-size:clamp(1.05rem,2.2vw,1.2rem);max-width:36rem}

/* hero */
.hero{padding-block:clamp(32px,6vw,72px)}
.hero .wrap{display:grid;gap:36px;align-items:center}
.hero h1{font-size:clamp(2.1rem,7.2vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.hero .lead{margin-top:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mosaic{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:12px;aspect-ratio:1/1.05;width:100%}
.mosaic img{width:100%;height:100%;min-height:0;min-width:0;object-fit:cover;border-radius:var(--r);background:var(--card)}
.mosaic img:first-child{grid-row:span 2}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr 1fr;gap:56px}}
@media(prefers-reduced-motion:no-preference){
  .mosaic img{animation:entra .7s cubic-bezier(.16,1,.3,1) both}
  .mosaic img:nth-child(2){animation-delay:.08s}.mosaic img:nth-child(3){animation-delay:.16s}
  @keyframes entra{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* áreas */
.areas{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.area{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--text);text-decoration:none;transition:border-color .18s}
.area:hover{border-color:var(--blue);color:var(--text)}
.area img{width:100%;aspect-ratio:4/5;object-fit:cover}
.area div{padding:14px 14px 16px;display:grid;gap:6px}
.area h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.area p{color:var(--muted);font-size:.88rem;line-height:1.45}
.area--destaque{grid-column:1/-1}
@media(min-width:560px){.area--destaque{flex-direction:row}.area--destaque img{width:46%;aspect-ratio:auto;min-height:100%}.area--destaque div{padding:24px;align-content:center}.area--destaque h3{font-size:1.5rem}.area--destaque p{font-size:1rem}}
@media(min-width:900px){.areas{grid-template-columns:repeat(4,minmax(0,1fr))}.area--destaque{grid-column:span 2;grid-row:span 2;flex-direction:column}.area--destaque img{width:100%;aspect-ratio:auto;flex:1 1 0;min-height:260px}}
.area--wide{grid-column:1/-1;flex-direction:row}
.area--wide img{width:46%;aspect-ratio:auto;min-height:100%}
.area--wide div{align-content:center}
@media(min-width:900px){.area--wide{grid-column:span 2}}
.mais{color:var(--cyan);font-weight:600;font-size:.9rem}

/* passos */
.passos{list-style:none;margin:0;padding:0;display:grid;gap:28px;counter-reset:p}
.passos li{counter-increment:p;display:grid;gap:8px;padding-top:18px;border-top:1px solid var(--line-2)}
.passos li::before{content:counter(p);font-weight:800;font-size:2.4rem;line-height:1;color:var(--cyan)}
.passos h3{font-size:1.2rem;font-weight:700}
.passos p{color:var(--muted)}
@media(min-width:800px){.passos{grid-template-columns:repeat(3,1fr);gap:40px}}

/* sobre */
.sobre .wrap{display:grid;gap:32px;align-items:center}
.sobre img{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover}
.sobre .txt{display:grid;gap:16px;max-width:38rem}
.sobre .txt p{color:var(--soft)}
@media(min-width:900px){.sobre .wrap{grid-template-columns:1fr 1fr;gap:64px}}

/* faixa final */
.fecho{background:var(--card);border-block:1px solid var(--line)}
.fecho .wrap{display:grid;gap:22px;justify-items:start}
.fecho h2{font-size:clamp(1.7rem,4.6vw,2.8rem);font-weight:800;max-width:24ch}
.links{display:flex;flex-wrap:wrap;gap:8px 24px}

/* rodapé */
.foot{padding-block:40px;color:var(--muted);font-size:.9rem}
.foot .wrap{display:grid;gap:24px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:var(--soft)}
.foot a:hover{color:var(--cyan)}
@media(min-width:800px){.foot .wrap{grid-template-columns:1fr auto;align-items:start}}

/* catálogo */
.filtro{position:sticky;top:var(--head);z-index:15;background:rgba(0,0,0,.96);border-bottom:1px solid var(--line);padding-block:12px}
.filtro .wrap{display:grid;gap:10px}
.busca{width:100%;min-height:46px;background:var(--card);border:1px solid var(--line-2);border-radius:10px;color:var(--text);padding:0 14px;font:400 1rem Inter,system-ui,sans-serif}
.busca::placeholder{color:var(--muted)}
.busca:focus{outline:2px solid var(--cyan);outline-offset:2px;border-color:transparent}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.chips a{flex:none;border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;color:var(--soft);text-decoration:none;font-size:.88rem;font-weight:500;white-space:nowrap}
.chips a:hover{border-color:var(--cyan);color:var(--cyan)}
.grupo{padding-block:36px 8px}
.grupo h2{font-size:clamp(1.3rem,3.4vw,1.8rem);font-weight:800;margin-bottom:6px}
.grupo .wrap>p{color:var(--muted);margin-bottom:20px;max-width:44rem}
.galeria{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.galeria{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.galeria{grid-template-columns:repeat(4,minmax(0,1fr))}}
.item{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.item img{width:100%;aspect-ratio:4/5;object-fit:cover}
.item .btn{white-space:nowrap}
.item figcaption{padding:12px 12px 14px;display:grid;gap:10px;font-size:.92rem;font-weight:500;margin-top:auto}
.item--link{color:var(--text);text-decoration:none;transition:border-color .18s}
.item--link:hover{border-color:var(--blue);color:var(--text)}
.item__legenda{padding:12px 12px 14px;font-size:.92rem;font-weight:500;margin-top:auto}
.item__legenda .ilus{display:block;margin-top:2px}
.vazio{padding:48px 0;color:var(--muted)}
[hidden]{display:none!important}

/* página de área (landing) */
.crumb{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted)}
.landing-hero .wrap{display:grid;gap:32px;align-items:center}
.landing-hero h1{font-size:clamp(2rem,6.4vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.landing-hero .foto{border-radius:var(--r);width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--card)}
@media(min-width:900px){.landing-hero .wrap{grid-template-columns:1.1fr .9fr;gap:56px}}
.usos{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-2)}
.usos li{padding:18px 0;border-bottom:1px solid var(--line-2);font-size:1.15rem;font-weight:600}
@media(min-width:800px){.usos{grid-template-columns:1fr 1fr;column-gap:56px}}
.ficha{display:grid;gap:0;margin:0}
.ficha div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.ficha dt{font-weight:700;color:var(--cyan)}
.ficha dd{margin:0;color:var(--soft)}
@media(min-width:800px){.ficha div{grid-template-columns:14rem 1fr;gap:32px}}
.lista-pedido{margin:0;padding-left:1.2em;display:grid;gap:8px;color:var(--soft)}
.duvidas details{border-bottom:1px solid var(--line-2);padding:16px 0}
.duvidas summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{content:"+";color:var(--blue);font-size:1.4rem;line-height:1}
.duvidas details[open] summary::after{content:"\2212"}
.duvidas p{color:var(--soft);margin-top:10px;max-width:44rem}
.duas{display:grid;gap:36px}
@media(min-width:900px){.duas{grid-template-columns:1fr 1fr;gap:64px}}

/* texto corrido (privacidade) */
.texto{max-width:46rem;display:grid;gap:14px}
.texto h1{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;margin-bottom:8px}
.texto h2{font-size:1.25rem;font-weight:700;margin-top:22px}
.texto p,.texto li{color:var(--soft)}
.texto ul{margin:0;padding-left:1.2em;display:grid;gap:6px}

/* aviso de cookies */
.cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:16px;display:grid;gap:12px;max-width:560px;margin-inline:auto;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.cookies p{font-size:.9rem;color:var(--soft)}
.cookies div{display:flex;gap:10px;flex-wrap:wrap}
@media(min-width:900px){.cookies{left:24px;right:auto;bottom:24px;margin:0}}

/* galeria de trabalhos: cada foto na sua proporção (fachadas largas não podem ser cortadas) */
.galeria--livre{display:block;columns:2;column-gap:14px}
@media(min-width:700px){.galeria--livre{columns:3}}
.galeria--livre .item{break-inside:avoid;margin:0 0 14px;display:block}
.galeria--livre .item img{aspect-ratio:auto;height:auto}

/* landing: pontos, preço, prazo, pedido */
.pontos{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;color:var(--soft)}
.pontos li{position:relative;padding-left:22px}
.pontos li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--cyan)}
.usos--lista{grid-template-columns:1fr!important}
/* botao fixo no celular */
.fixo{display:none}
@media(max-width:819px){
  .fixo{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(0,0,0,.95);border-top:1px solid var(--line)}
  .fixo .btn{width:100%}
  body{padding-bottom:76px}
  .cookies{bottom:88px}
}
.ilus{color:var(--muted);font-style:normal;font-weight:400;font-size:.85em}

/* rotulo de simulacao e galeria de simulacoes (maiores) */
.foto-wrap{position:relative}
.tag-sim{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.82);color:var(--soft);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600}
.area{position:relative}
.area .tag-sim{top:10px;bottom:auto}
.galeria--sim{columns:1!important}
@media(min-width:700px){.galeria--sim{columns:2!important}}
.simulacoes .sec-head p strong{color:var(--text)}

/* abertura da landing: foto quase quadrada (a lona na estrutura aparece inteira) */
.landing-hero .foto{aspect-ratio:1/1;object-fit:cover}

/* ===== redesenho 21/09/2026: azul no lugar do magenta, azul escuro suave, abertura em tela cheia, galeria alinhada, aparicao ao rolar ===== */
:root{--ease:cubic-bezier(.16,1,.3,1)}
.btn-primary{box-shadow:0 6px 22px rgba(37,99,235,.32)}
.btn-primary:hover{box-shadow:0 8px 28px rgba(37,99,235,.45)}
/* quebra o preto puro: faixas em azul escuro que se fundem ao preto */
.faixa-azul{background:radial-gradient(900px 420px at 85% 0%,rgba(37,99,235,.16),transparent 65%),linear-gradient(180deg,#000 0%,var(--navy) 50%,#000 100%)}
.fecho{background:radial-gradient(800px 380px at 20% 0%,rgba(37,99,235,.20),transparent 62%),linear-gradient(180deg,var(--navy),#03081a)}
.head{background:rgba(2,6,16,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* aparicao ao rolar (so ativa com JS; sem JS tudo aparece) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* abertura em tela cheia: foto grande que se funde ao fundo azul escuro */
.hero-x{position:relative;overflow:hidden;background:radial-gradient(900px 520px at 80% 35%,rgba(37,99,235,.26),transparent 66%),radial-gradient(700px 420px at 0% 100%,rgba(10,40,120,.30),transparent 60%),#000;padding:0}
.hero-x__img{position:absolute;top:0;right:0;bottom:0;width:min(62%,940px);z-index:1}
.hero-x__img img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.hero-x__img::after{content:"";position:absolute;inset:auto 0 0 0;height:26%;background:linear-gradient(0deg,#000,transparent);pointer-events:none}
.hero-x__img .tag-sim{left:auto;right:20px;bottom:18px;z-index:3}
.hero-x__wrap{position:relative;z-index:2;display:flex;align-items:center;min-height:clamp(540px,82vh,760px);padding-block:56px}
.hero-x__txt{max-width:31rem}
.hero-x h1{font-size:clamp(2.2rem,5.4vw,4.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.hero-x .lead{margin-top:20px}
.hero-x .crumb{margin-bottom:16px}
@media(max-width:899px){
  .hero-x__img{position:relative;width:100%;height:clamp(240px,52vw,420px)}
  .hero-x__img img{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 38%);mask-image:linear-gradient(0deg,transparent 0,#000 38%)}
  .hero-x__img::after{display:none}
  .hero-x__wrap{min-height:0;padding-block:8px 44px}
  .hero-x__img .tag-sim{right:auto;left:14px;bottom:26px}
}

/* galeria alinhada: cada linha fecha a largura com imagens de mesma altura, inteiras */
.just{display:grid;gap:14px}
.just-row{display:flex;gap:14px}
.just-row figure{position:relative;margin:0;flex:var(--ar) 1 0;min-width:0;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line)}
.just-row img{display:block;width:100%;height:auto}
.just-row figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;font-size:.85rem;font-weight:600;color:var(--text);background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);pointer-events:none}
.just-row figcaption em{font-style:normal;font-weight:400;color:var(--soft)}
@media(max-width:699px){.just-row{display:grid;gap:14px}}

/* cartoes com icone (servicos e diferenciais) */
.cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards--3{grid-template-columns:repeat(3,1fr)}.cards--4{grid-template-columns:repeat(4,1fr)}}
.cartao{background:linear-gradient(180deg,rgba(37,99,235,.10),rgba(37,99,235,.02));border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 24px;display:grid;gap:10px;align-content:start}
.cartao .ic{color:var(--cyan)}
.cartao h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.cartao p{color:var(--soft);font-size:.95rem;line-height:1.55}
.cartao:hover{border-color:var(--blue)}

/* passos em azul */
.passos li::before{color:var(--cyan)}

/* rodape de contato */
.foot__grid{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:800px){.foot__grid{grid-template-columns:1.2fr 1.2fr 1fr}}
.foot strong{color:var(--text);display:block;margin-bottom:6px}
.foot .foot__nome{font-size:1.1rem}
.foot p{line-height:1.8}
.foot nav{display:grid;gap:6px;align-content:start}
.foot nav strong{margin-bottom:2px}