:root{
  --preto:#111111;--preto-2:#1C1A1A;--linha-e:#2E2A29;
  --creme:#F4E6C3;--creme-2:#E9DDBF;--linha-c:#D9CBA8;
  --vinho:#A51C34;--mostarda:#F3AF30;
  --suave-c:#5E5652;--suave-e:#BDB3A0;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --texto:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);--max:1240px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--preto);color:var(--creme);font:400 17px/1.6 var(--texto);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--mostarda);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.lab{font:600 12px/1.2 var(--texto);letter-spacing:.2em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance;line-height:1.1}
p{margin:0}

/* cabeçalho */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--preto);border-bottom:1px solid var(--linha-e)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.top .logo img{height:34px;width:auto}
.top nav{display:flex;gap:28px;align-items:center}
.top nav a{text-decoration:none;font-size:15px;color:var(--suave-e)}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--creme)}
.top nav a.cta{color:var(--preto);background:var(--creme);padding:10px 16px;font-weight:600}
.top nav a.cta:hover{background:var(--mostarda)}
.menu{display:none;background:none;border:1px solid var(--linha-e);color:var(--creme);font:600 13px var(--texto);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
@media (max-width:860px){
  .menu{display:block}
  .top nav{position:absolute;left:0;right:0;top:72px;background:var(--preto);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gutter) 24px;border-bottom:1px solid var(--linha-e)}
  .top nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--linha-e);font-size:17px}
  .top nav a.cta{margin-top:16px;text-align:center;border:0}
  .top nav[data-open="false"]{display:none}
}

/* seções */
.sec{padding-block:clamp(64px,10vw,128px)}
.sec.creme{background:var(--creme);color:var(--preto)}
.sec.vinho{background:var(--vinho);color:var(--creme)}
.sec.creme .lab{color:var(--vinho)}
.sec .lab{color:var(--mostarda)}
.sec.vinho .lab{color:var(--creme)}
.head{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:clamp(40px,6vw,72px)}
.head h2{font-size:clamp(36px,5.4vw,64px);line-height:1.02}
.head p{font-size:19px;color:var(--suave-e);max-width:60ch}
.sec.creme .head p{color:var(--suave-c)}

/* hero */
.hero{padding-block:clamp(48px,8vw,104px) clamp(56px,8vw,96px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:end}
.hero h1{font-size:clamp(46px,7.6vw,104px);line-height:.96;letter-spacing:-.035em}
.hero h1 em{font-style:italic;font-weight:500;color:var(--mostarda)}
.hero .sub{font-size:19px;color:var(--suave-e);max-width:44ch;margin-top:28px}
.hero .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero figure{margin:0}
.hero figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hero figcaption{font-size:13px;color:var(--suave-e);margin-top:10px}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:16px;padding:15px 22px;border:1px solid var(--creme);color:var(--creme);background:transparent;cursor:pointer}
.btn:hover{background:var(--creme);color:var(--preto)}
.btn.cheio{background:var(--vinho);border-color:var(--vinho)}
.btn.cheio:hover{background:var(--creme);border-color:var(--creme);color:var(--preto)}
.sec.creme .btn{border-color:var(--preto);color:var(--preto)}
.sec.creme .btn:hover{background:var(--preto);color:var(--creme)}
.sec.creme .btn.cheio{background:var(--vinho);border-color:var(--vinho);color:var(--creme)}

/* frentes em linhas */
.frentes{border-top:1px solid var(--preto)}
.frente{display:grid;grid-template-columns:72px 1fr 1.3fr;gap:24px;padding-block:28px;border-bottom:1px solid var(--linha-c);align-items:baseline}
.frente .n{font:600 13px var(--texto);letter-spacing:.14em;color:var(--vinho)}
.frente h3{font-size:clamp(28px,3.4vw,40px)}
.frente p{color:var(--suave-c)}
@media (max-width:720px){.frente{grid-template-columns:1fr;gap:8px}}

/* grade de trabalhos */
.grade{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.6vw,20px)}
.item{margin:0;position:relative;grid-column:span 4;cursor:zoom-in;align-self:start}
.item img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/5}
.item.largo{grid-column:span 8}.item.largo img{aspect-ratio:16/10}
.item.meio{grid-column:span 6}.item.meio img{aspect-ratio:16/10}
.item figcaption{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-top:10px;color:var(--suave-e);background:var(--preto)}
.sec.creme .item figcaption{background:var(--creme);color:var(--suave-c)}
.item figcaption b{color:var(--creme);font-weight:600}
.sec.creme .item figcaption b{color:var(--preto)}
@media (max-width:860px){.item,.item.largo,.item.meio{grid-column:span 12}}
.item[hidden]{display:none}

.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filtros button{font:600 14px var(--texto);background:transparent;color:var(--suave-e);border:1px solid var(--linha-e);padding:10px 16px;cursor:pointer}
.filtros button[aria-pressed="true"]{background:var(--creme);color:var(--preto);border-color:var(--creme)}

/* processo */
.passos{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;counter-reset:p}
.passo{border-top:2px solid var(--creme);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.passo .n{font:600 13px var(--texto);letter-spacing:.14em;color:var(--mostarda)}
.passo h3{font-size:26px}
.passo p{color:var(--suave-e);font-size:16px}
@media (max-width:960px){.passos{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.passos{grid-template-columns:1fr}}

/* manifesto */
.manifesto{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.manifesto div{border-top:1px solid rgba(244,230,195,.45);padding-block:24px}
.manifesto h3{font-size:clamp(26px,3vw,36px)}
.manifesto p{margin-top:8px;opacity:.85}
@media (max-width:720px){.manifesto{grid-template-columns:1fr}}

/* planos */
.lista{border-top:1px solid var(--preto)}
.lista .linha{display:grid;grid-template-columns:1fr 1.6fr;gap:24px;padding-block:22px;border-bottom:1px solid var(--linha-c)}
.lista h3{font-size:26px}
.lista p{color:var(--suave-c)}
@media (max-width:720px){.lista .linha{grid-template-columns:1fr;gap:6px}}

/* contato */
.contato{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
.contato h2{font-size:clamp(40px,6vw,80px);line-height:1}
.dados{display:flex;flex-direction:column;gap:6px;font-size:17px}
.dados .copiar{background:none;border:0;color:inherit;font:inherit;padding:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;text-align:left}
@media (max-width:860px){.contato{grid-template-columns:1fr}}

/* área do cliente */
.portas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.porta{border:1px solid var(--linha-c);padding:32px;display:flex;flex-direction:column;gap:14px;background:#FBF4E3}
.porta h3{font-size:28px}
.porta p{color:var(--suave-c);flex:1}
@media (max-width:860px){.portas{grid-template-columns:1fr}}

/* rodapé */
.rodape{border-top:1px solid var(--linha-e);padding-block:40px;font-size:14px;color:var(--suave-e)}
.rodape .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-end}
.rodape .ass{font:500 italic 18px var(--display);color:var(--creme)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(17,17,17,.96);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.lb img{max-height:86vh;width:auto;max-width:100%}
.lb button{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;background:var(--creme);color:var(--preto);border:0;font:600 14px var(--texto);padding:10px 14px;cursor:pointer}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}