/* Andre Azevedo — v5 (logo do cliente, topo no modelo DAC)
   Layout simétrico e organizado. Fonte do logo (Rye) em títulos, menu, rótulos e botões; IBM Plex Sans no texto corrido.
   Paleta de luxo em 4 tons: ônix (âncora), oxblood (profundidade), ouro areia do logo (metal), marfim (neutro). */
:root{
  --onix:#0b0b0a;
  --onix2:#141413;
  --onix3:#1c1b19;
  --oxblood:#5c1a1b;
  --oxblood2:#45120f;
  --ouro:#ecc590;
  --ouro2:#d4aa70;
  --marfim:#efe9df;
  --cinza:#a39d93;
  --cinza2:#6f6a62;
  --linha:rgba(239,233,223,.12);
  --ease:cubic-bezier(.16,.84,.32,1);
  --titulo:"Rye",Georgia,serif;
  --texto:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"Rye",Georgia,serif;
  --g:clamp(16px,4.5vw,48px);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--onix)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--onix);color:var(--marfim);font:400 16px/1.65 var(--texto);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ouro);color:var(--onix)}
:focus-visible{outline:1px solid var(--ouro);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.centro{text-align:center}

/* ---------- tipografia ---------- */
.rot{display:inline-flex;align-items:center;gap:10px;font:400 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);margin:0}
.rot::before{content:"";width:22px;height:1px;background:currentColor}
.centro .rot::after{content:"";width:22px;height:1px;background:currentColor}
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.15;letter-spacing:.01em;margin:0}
h2{font-size:clamp(28px,4.6vw,52px)}
h3{font-size:clamp(17px,1.8vw,20px);font-weight:400;letter-spacing:.02em}
p{margin:0 0 1em}
.lead{font-size:clamp(16px,1.6vw,18px);line-height:1.65;color:var(--cinza);max-width:34em;margin:0}
.centro .lead{margin-left:auto;margin-right:auto}
.ouro{color:var(--ouro)}
.a-preencher{color:var(--cinza);font-style:normal;white-space:nowrap}
.a-preencher::before{content:"";display:inline-block;width:6px;height:6px;border:1px solid var(--ouro);margin:0 8px 2px 0;vertical-align:middle;transform:rotate(45deg)}

/* ---------- topo: logo grande centralizado, menu logo abaixo (modelo DAC) ---------- */
.topo{display:grid;place-items:center;padding:clamp(32px,5vw,60px) var(--g);background:radial-gradient(ellipse 60% 75% at 50% 55%,rgba(92,26,27,.55),transparent 72%)}
.topo-logo{display:block}
.topo-logo img{width:min(400px,68vw);height:auto;filter:drop-shadow(0 0 28px rgba(236,197,144,.12))}
body.interna .topo{padding:clamp(22px,3.4vw,36px) var(--g)}
body.interna .topo-logo img{width:min(260px,54vw)}
.topo-logo img{opacity:0;transform:translateY(10px) scale(.985);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.pronto .topo-logo img{opacity:1;transform:none}
.barra{position:sticky;top:0;z-index:40;background:rgba(11,11,10,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.menu{display:flex;justify-content:center;gap:clamp(4px,4.5vw,64px);max-width:var(--max);margin:0 auto;padding:0 var(--g);list-style:none}
.menu a{position:relative;display:inline-flex;align-items:center;font:400 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:20px 6px;color:var(--cinza);transition:color .3s var(--ease)}
.menu a::before{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;background:var(--ouro);transform:scaleX(0);transition:transform .4s var(--ease)}
.menu a:hover{color:var(--marfim)}
.menu a:hover::before{transform:scaleX(.4)}
.menu a[aria-current]{color:var(--ouro)}
.menu a[aria-current]::before{transform:scaleX(1)}
@media (max-width:640px){
  .topo{padding:26px var(--g)}
  body.interna .topo{padding:18px var(--g)}
  .menu{justify-content:space-between;padding:0 calc(var(--g) - 4px)}
  .menu a{font-size:11px;letter-spacing:.06em;padding:17px 4px}
}
@media (max-width:360px){.menu a{font-size:10px;letter-spacing:.03em}}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 26px;text-decoration:none;font:400 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:1px solid var(--ouro);background:var(--ouro);color:var(--onix);position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),border-color .4s var(--ease);-webkit-tap-highlight-color:transparent}
.btn::before{content:"";position:absolute;inset:0;background:var(--marfim);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .45s var(--ease);flex:none}
@media (hover:hover){.btn:hover::before{transform:none}.btn:hover{border-color:var(--marfim)}.btn:hover svg{transform:translateX(4px)}}
.btn:active{transform:translateY(1px)}
.btn.linha{background:transparent;color:var(--marfim);border-color:rgba(239,233,223,.32)}
.btn.linha::before{background:var(--ouro)}
@media (hover:hover){.btn.linha:hover{color:var(--onix);border-color:var(--ouro)}}
.btn.peq{min-height:44px;padding:0 18px;font-size:11px}
.acoes{display:flex;flex-wrap:wrap;gap:12px}
.centro .acoes{justify-content:center}
.link{font:400 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:10px;align-items:center;padding:10px 0;color:var(--ouro);border-bottom:1px solid rgba(201,169,110,.35);transition:border-color .35s var(--ease),gap .35s var(--ease)}
.link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.link:hover{border-color:var(--ouro);gap:16px}

/* ---------- moldura das fotos ---------- */
.moldura{position:relative;padding:12px;border:1px solid rgba(201,169,110,.35)}
.moldura .quadro{overflow:hidden;background:var(--onix3)}
.moldura .quadro img{width:100%;height:100%;object-fit:cover}

/* ---------- abertura: centralizada, abaixo do menu ---------- */
.hero{text-align:center;padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,112px)}
.hero .wrap{display:grid;justify-items:center;gap:24px}
.hero-status{color:var(--marfim)}
.hero-frase{font-size:clamp(26px,4.2vw,52px);line-height:1.2;max-width:19em}
.hero-frase .ouro{display:block}
.hero-sub{font:400 13px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);margin:0}
.hero .acoes{justify-content:center;margin-top:8px}
.hero>.wrap>*{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero>.wrap>*:nth-child(1){transition-delay:.25s}
.hero>.wrap>*:nth-child(2){transition-delay:.33s}
.hero>.wrap>*:nth-child(3){transition-delay:.41s}
.hero>.wrap>*:nth-child(4){transition-delay:.49s}
.pronto .hero>.wrap>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero>.wrap>*,.topo-logo img{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- seções ---------- */
.secao{padding:clamp(80px,11vw,140px) 0}
.secao+.secao{border-top:1px solid var(--linha)}
.vinho{background:linear-gradient(180deg,var(--oxblood),var(--oxblood2));border-top:0!important}
.vinho+.secao{border-top:0}
.cab{display:grid;gap:18px;justify-items:center;text-align:center;margin-bottom:clamp(40px,6vw,64px)}
.cab .lead{margin:0 auto}
.mais{display:flex;justify-content:center;margin-top:48px}

/* ---------- grade de obras ---------- */
.grade{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:720px){.grade{grid-template-columns:repeat(3,1fr);gap:12px}}
@media (min-width:1024px){.grade{grid-template-columns:repeat(4,1fr)}}
.obra{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--onix3);border:0;padding:0;cursor:zoom-in;color:var(--marfim)}
.obra img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.obra::after{content:"";position:absolute;inset:8px;border:1px solid rgba(201,169,110,0);transition:border-color .45s var(--ease);pointer-events:none}
.obra .leg{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 16px;background:linear-gradient(transparent,rgba(11,11,10,.88));text-align:left;font:500 13px/1.35 var(--texto);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.obra .leg small{display:block;color:var(--ouro);font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
@media (hover:hover){.obra:hover img{transform:scale(1.04)}.obra:hover::after{border-color:rgba(201,169,110,.7)}.obra:hover .leg{opacity:1;transform:none}}

/* ---------- filtros ---------- */
.filtros{display:inline-flex;border:1px solid var(--linha);margin:0 auto 36px}
.filtros-wrap{display:flex;justify-content:center}
.filtros button{background:none;border:0;padding:0 20px;min-height:48px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease);display:flex;gap:8px;align-items:center;white-space:nowrap;color:var(--cinza)}
.filtros button+button{border-left:1px solid var(--linha)}
.filtros button:hover{color:var(--marfim)}
.filtros button[aria-pressed=true]{background:var(--ouro);color:var(--onix)}
.filtros sup{font-size:9px;opacity:.7;top:0}
@media (max-width:480px){.filtros{display:flex;width:100%}.filtros button{flex:1;justify-content:center;padding:0 6px}}

/* ---------- estilos: dois cartões iguais ---------- */
.estilos{display:grid;gap:20px}
@media (min-width:860px){.estilos{grid-template-columns:1fr 1fr;gap:24px}}
.estilo{display:grid;gap:22px;padding:clamp(24px,3vw,36px);background:rgba(11,11,10,.28);border:1px solid rgba(201,169,110,.28);align-content:start}
.estilo-cab{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.estilo h3{font-size:clamp(24px,2.8vw,32px);font-weight:400}
.estilo .n{font:400 12px/1 var(--mono);letter-spacing:.14em;color:var(--ouro)}
.estilo p{color:rgba(239,233,223,.72);margin:0}
.amostra{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.amostra a{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--onix3)}
.amostra img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.amostra a:hover img{transform:scale(1.05)}

/* ---------- sobre ---------- */
.sobre{display:grid;gap:48px;align-items:center}
.sobre figure{margin:0}
.sobre .quadro{aspect-ratio:4/5}
.sobre-texto{display:grid;gap:20px;justify-items:start}
.fatos{list-style:none;padding:0;margin:12px 0 0;width:100%;border-top:1px solid var(--linha)}
.fatos li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--linha);font-size:15px}
.fatos li>span:first-child{font:400 11px/2.1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
@media (min-width:960px){.sobre{grid-template-columns:1fr 1fr;gap:72px}}

/* ---------- passos ---------- */
.passos{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:860px){.passos{grid-template-columns:repeat(3,1fr);gap:24px}}
.passos li{padding:32px 28px;border:1px solid var(--linha);background:var(--onix2);display:grid;gap:14px;align-content:start;transition:border-color .4s var(--ease)}
.passos li:hover{border-color:rgba(201,169,110,.45)}
.passos .n{font:400 40px/1 var(--titulo);color:var(--ouro);letter-spacing:-.03em}
.passos p{color:var(--cinza);margin:0}
.passos-nota{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;margin-top:32px;font-size:15px;color:var(--cinza)}

/* ---------- chamada ---------- */
.chamada{text-align:center}
.chamada h2{font-size:clamp(34px,6.4vw,76px);margin:20px 0 20px}
.chamada .lead{margin:0 auto 36px;color:rgba(239,233,223,.75)}

/* ---------- rodapé centralizado ---------- */
.rodape{padding:clamp(56px,7vw,88px) 0 28px;border-top:1px solid var(--linha);background:var(--onix);text-align:center}
.rodape .wrap{display:grid;justify-items:center;gap:32px}
.rodape-logo{display:block}
.rodape-logo img{width:clamp(180px,22vw,260px);height:auto}
.rodape-frase{font:400 12px/1.8 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);margin:-8px 0 0}
.colunas{display:grid;grid-template-columns:1fr;gap:28px;width:100%;max-width:820px;padding:32px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
@media (min-width:720px){.colunas{grid-template-columns:repeat(3,1fr)}}
.rodape h4{margin:0 0 12px;font:400 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ouro)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px;color:var(--cinza)}
.rodape a{text-decoration:none;color:var(--marfim);transition:color .3s var(--ease)}
.rodape a:hover{color:var(--ouro)}
.aviso18{display:inline-flex;gap:14px;align-items:center;font-size:14px;color:var(--cinza);margin:0}
.aviso18 b{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--ouro);color:var(--ouro);font:400 13px/1 var(--mono);flex:none}
.rodape .base{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--cinza2);font-size:13px}
.rodape .base a{text-decoration:underline;text-underline-offset:3px;color:var(--cinza)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,8,7,.97);color:var(--marfim);display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lb.aberto{opacity:1;visibility:visible}
.lb-topo,.lb-base{display:flex;justify-content:space-between;align-items:center;padding:10px var(--g);gap:12px}
.lb-palco{position:relative;display:grid;place-items:center;overflow:hidden;touch-action:pan-y}
.lb-palco img{max-width:calc(100% - 2*var(--g));max-height:100%;object-fit:contain;transition:opacity .3s var(--ease)}
.lb button{background:none;border:1px solid var(--linha);color:inherit;min-width:48px;height:48px;cursor:pointer;font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0 16px;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.lb button:hover{background:var(--ouro);border-color:var(--ouro);color:var(--onix)}
.lb [data-leg]{font:400 14px/1.4 var(--texto);text-align:center;color:var(--marfim);letter-spacing:0;text-transform:none}
.lb [data-leg]::before,.lb [data-cont]::before{display:none}

/* ---------- revelar ao rolar ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv,.ab-texto>*,.ab-foto{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- progresso ---------- */
.progresso{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.progresso i{display:block;height:100%;background:var(--ouro);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- páginas internas ---------- */
.topo-pag{padding-top:clamp(56px,8vw,96px)}
.topo-pag h1{font-size:clamp(36px,6.4vw,76px)}

/* ---------- formulário ---------- */
.form{display:grid;gap:30px;max-width:720px;margin:0 auto;padding:clamp(24px,4vw,44px);border:1px solid var(--linha);background:var(--onix2)}
.campo{display:grid;gap:10px;border:0;padding:0;margin:0;min-width:0}
.campo label,.campo legend{font:400 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ouro);padding:0}
.campo legend{margin-bottom:10px}
.campo small{color:var(--cinza2);font-size:14px}
.campo input[type=text],.campo input[type=number],.campo textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--linha);padding:12px 0;font-size:18px;border-radius:0;outline:0;transition:border-color .3s var(--ease)}
.campo textarea{min-height:130px;resize:vertical;border:1px solid var(--linha);padding:14px}
.campo input:focus,.campo textarea:focus{border-color:var(--ouro)}
.campo ::placeholder{color:var(--cinza2)}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcoes label{position:relative;cursor:pointer;text-transform:none;letter-spacing:0;font:400 15px/1 var(--texto);color:var(--marfim)}
.opcoes input{position:absolute;opacity:0;pointer-events:none}
.opcoes span{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1px solid var(--linha);transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.opcoes input:checked+span{background:var(--ouro);border-color:var(--ouro);color:var(--onix)}
.opcoes input:focus-visible+span{outline:1px solid var(--ouro);outline-offset:3px}
.check{display:flex;gap:14px;align-items:flex-start;cursor:pointer;font-size:15px}
.check input{width:22px;height:22px;accent-color:var(--ouro);flex:none;margin:1px 0 0}
.previa{background:var(--onix);padding:20px;font:400 14px/1.7 var(--texto);white-space:pre-wrap;word-break:break-word;border-left:2px solid var(--ouro);color:var(--marfim)}
.envio{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.nota{font-size:14px;color:var(--cinza);margin:0}
.ok{display:none;border:1px solid var(--ouro);padding:18px;font-size:15px;margin:0}
.ok.vis{display:block}

/* ---------- 404 ---------- */
.p404{min-height:80svh;display:flex;align-items:center}
.p404 .lead{margin:24px auto 32px}
@media (max-width:479px){.acoes .btn,.envio .btn{flex:1 1 100%}}
.hero-sub span{white-space:nowrap}
.hero-sub span+span::before{content:"· "}
@media (max-width:560px){.hero-frase{font-size:clamp(24px,7vw,30px)}.hero-sub span{display:block}.hero-sub span+span::before{content:none}}