:root{ --gold:#d8a948; --gold-soft:#efc665; --teal:#5fcaba; --ink:#05090a; --logo-red:#c10f12; --logo-red-soft:#ff2a34; --smoke:#101516; --smoke-deep:#05090a; --white:#ffffff; --edit-x:0px; --edit-y:0px; --edit-scale:1; --edit-rotate:0deg; --edit-opacity:1; } *{box-sizing:border-box} html{height:100%;scroll-behavior:smooth} body{ min-height:100%; margin:0; background:#05090a; color:var(--white); font-family:"Montserrat",system-ui,Arial,sans-serif; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .editable-target{ --edit-x:0px; --edit-y:0px; --edit-scale:1; --edit-rotate:0deg; --edit-opacity:1; } .edit-hidden{display:none!important} .hero{ position:relative; min-height:100svh; overflow:hidden; isolation:isolate; } .hero-bg{ position:absolute; inset:0; z-index:-3; background:url("assets/CAPAS/box-de-vidro-para-banheiro-1.webp") center center / cover no-repeat; transform:scale(1.02); } .hero-overlay{ position:absolute; inset:0; z-index:-2; background: linear-gradient(90deg,rgba(3,7,9,.78),rgba(3,7,9,.22) 45%,rgba(3,7,9,.05) 68%,rgba(3,7,9,.28)), linear-gradient(180deg,rgba(3,7,9,.30),rgba(3,7,9,0) 32%,rgba(3,7,9,.78)); } .header-only-stage{ position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:#05090a; } /* ===== Slideshow de capa (3 imagens, crossfade) ===== */ .cover-slides{position:absolute;inset:0;z-index:-3;overflow:hidden} .cover-slide{ position:absolute;inset:0; background-size:cover;background-position:center 32%; opacity:0; transform:scale(1.04); will-change:opacity,transform; } /* imagens trocáveis por página: defina --capa-1/2/3 no da página */ .cover-slide:nth-child(1){background-image:var(--capa-1,image-set(url("assets/capa-1-ps100-q42.avif?v=3") type("image/avif"),url("assets/capa-1-ps100.webp?v=2") type("image/webp")));opacity:1;transform:none} .cover-slide:nth-child(2){background-image:var(--capa-2,none)} .cover-slide:nth-child(3){background-image:var(--capa-3,none)} .cover-slides.is-ready .cover-slide{opacity:0;transform:scale(1.04);animation:coverFade 24s infinite} .cover-slides.is-ready .cover-slide:nth-child(1){animation-delay:0s} .cover-slides.is-ready .cover-slide:nth-child(2){animation-delay:8s} .cover-slides.is-ready .cover-slide:nth-child(3){animation-delay:16s} @keyframes coverFade{ 0%{opacity:0;transform:scale(1.07)} 4%{opacity:1} 29%{opacity:1;transform:scale(1.0)} 37%{opacity:0;transform:scale(1.0)} 100%{opacity:0} } .cover-overlay{ position:absolute;inset:0;z-index:-2; background:linear-gradient(180deg,rgba(4,8,9,.55),rgba(4,8,9,.18) 30%,rgba(4,8,9,.30) 60%,rgba(4,8,9,.72)); } @media (prefers-reduced-motion:reduce){ .cover-slide{animation:none} .cover-slide:nth-child(1){opacity:1;transform:none} } .header-only-stage:before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(255,255,255,.035),transparent 22% 78%,rgba(255,255,255,.03)), repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 92px); opacity:.38; pointer-events:none; } .layered-header{ position:absolute; top:clamp(22px,3.2vw,54px); left:0; z-index:6; width:min(94vw,1480px); aspect-ratio:1959 / 570; display:grid; grid-template-columns:minmax(220px,.74fr) minmax(420px,1.2fr) minmax(180px,.46fr); align-items:center; gap:clamp(8px,1vw,18px); padding:0 clamp(56px,5vw,104px) 0 clamp(82px,7.2vw,132px); transform:translate(var(--edit-x),var(--edit-y)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); transform-origin:left top; opacity:var(--edit-opacity); filter:drop-shadow(0 20px 30px rgba(0,0,0,.42)); } .header-clean-art{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:fill; object-position:center center; pointer-events:none; user-select:none; transform:translate(var(--edit-x),var(--edit-y)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); transform-origin:center; opacity:var(--edit-opacity); } .glass-panel{ position:absolute; inset:0; z-index:-2; clip-path:polygon(.7% 9%,99.4% 18%,99% 91%,.3% 93%); border:1px solid rgba(104,228,218,.55); background: linear-gradient(105deg,rgba(255,255,255,.13),rgba(255,255,255,0) 15%,rgba(255,255,255,.05) 44%,rgba(255,255,255,.14) 79%,rgba(255,255,255,.04)), radial-gradient(90% 180% at 22% 0%,rgba(230,255,252,.16),transparent 48%), linear-gradient(180deg,rgba(39,50,52,.86),rgba(13,23,25,.78) 43%,rgba(22,32,33,.83)); backdrop-filter:blur(10px) saturate(1.08); -webkit-backdrop-filter:blur(10px) saturate(1.08); box-shadow: inset 0 2px 0 rgba(231,255,252,.36), inset 0 -3px 0 rgba(79,231,219,.58), inset 18px 0 16px rgba(106,238,232,.30), inset -16px 0 18px rgba(104,228,218,.20), 0 32px 32px rgba(0,0,0,.43); } .glass-panel:before{ content:""; position:absolute; inset:8% 1.4%; background: linear-gradient(100deg,transparent 0 23%,rgba(255,255,255,.14) 28%,transparent 35% 66%,rgba(255,255,255,.10) 72%,transparent 82%), repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 88px); opacity:.72; mix-blend-mode:screen; } .glass-edge{ position:absolute; left:1.6%; right:1.4%; z-index:-1; height:3px; border-radius:999px; background:linear-gradient(90deg,rgba(67,214,206,.8),rgba(255,255,255,.95) 31%,rgba(67,214,206,.85) 58%,rgba(255,255,255,.90) 77%,rgba(67,214,206,.76)); filter:blur(.25px); box-shadow:0 0 14px rgba(74,231,220,.7); } .edge-top{top:11%} .edge-bottom{bottom:8%} .screw{ position:absolute; z-index:2; width:clamp(48px,5.6vw,94px); height:auto; pointer-events:none; filter:drop-shadow(0 8px 9px rgba(0,0,0,.50)); } .screw-tl{left:clamp(16px,2.2vw,42px);top:20%;transform:translateY(-50%)} .screw-bl{left:clamp(16px,2.2vw,42px);bottom:20%;transform:translateY(50%)} .screw-tr{right:clamp(16px,2.2vw,42px);top:25%;transform:translateY(-50%) scaleX(-1)} .screw-br{right:clamp(16px,2.2vw,42px);bottom:23%;transform:translateY(50%) scaleX(-1)} .brand-logo{ display:block; position:relative; z-index:3; width:clamp(210px,22vw,350px); min-height:clamp(62px,7vw,110px); justify-self:start; transform:translateY(clamp(-8px,-.5vw,-3px)) translate(var(--edit-x),var(--edit-y)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); transform-origin:center; opacity:var(--edit-opacity); } .brand-logo img{ width:100%; filter:drop-shadow(0 5px 8px rgba(0,0,0,.48)); } .test8-header .brand-logo img{ opacity:0; } .premium-ai-header .brand-logo img{ opacity:1; } .main-nav{ position:relative; z-index:3; display:flex; align-items:center; justify-content:center; gap:0; min-width:0; transform:translate(var(--edit-x),var(--edit-y)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); transform-origin:center; opacity:var(--edit-opacity); } .main-nav a{ position:relative; padding:clamp(5px,.48vw,9px) clamp(7px,.62vw,12px); color:rgba(255,255,255,.88); font-size:clamp(.56rem,.66vw,.80rem); font-weight:700; text-transform:uppercase; text-shadow:0 3px 7px rgba(0,0,0,.78),0 0 2px rgba(0,0,0,.55); white-space:nowrap; } .main-nav a + a{border-left:1px solid rgba(216,169,72,.82)} .main-nav a:after{ content:""; position:absolute; left:16%; right:16%; bottom:1px; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); transform:scaleX(0); transition:transform .2s ease; box-shadow:0 4px 10px rgba(216,169,72,.26); } .main-nav a:hover, .main-nav a.is-active{color:var(--gold-soft)} .main-nav a:hover:after, .main-nav a.is-active:after{transform:scaleX(1)} /* ===== Dropdown "Trabalhos" (desktop) ===== */ .main-nav > * + *{border-left:1px solid rgba(216,169,72,.82)} .nav-drop{position:relative;display:inline-flex;align-items:center} .main-nav .nav-drop-trigger{ all:unset;cursor:pointer;position:relative; display:inline-flex;align-items:center;gap:.4em; padding:clamp(5px,.48vw,9px) clamp(7px,.62vw,12px); color:rgba(255,255,255,.88);font-family:inherit; font-size:clamp(.56rem,.66vw,.80rem);font-weight:700; text-transform:uppercase;white-space:nowrap; text-shadow:0 3px 7px rgba(0,0,0,.78),0 0 2px rgba(0,0,0,.55); } .nav-drop-trigger .caret{ width:0;height:0;border-left:.32em solid transparent;border-right:.32em solid transparent; border-top:.36em solid currentColor;opacity:.85;transition:transform .25s ease; } .nav-drop:hover .nav-drop-trigger,.nav-drop:focus-within .nav-drop-trigger{color:var(--gold-soft)} .nav-drop:hover .nav-drop-trigger .caret,.nav-drop.open .nav-drop-trigger .caret{transform:rotate(180deg)} .nav-drop-menu{ position:absolute;top:100%;left:50%; display:flex;flex-direction:column;min-width:200px;margin-top:0;padding:6px 0; background:rgba(7,13,15,.98);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid rgba(95,202,186,.30);border-radius:9px;box-shadow:0 16px 34px rgba(0,0,0,.55); opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px); transition:opacity .18s ease,transform .18s ease;z-index:30; } .nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.open .nav-drop-menu{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0); } /* ponte invisível: mantém o hover ao mover do "Trabalhos" para o menu */ .nav-drop-menu::before{content:"";position:absolute;left:-12px;right:-12px;top:-14px;height:16px} .nav-drop-menu a{ border-left:none !important;padding:9px 16px;white-space:nowrap;text-align:left; font-size:.82em;font-weight:600;text-transform:none;letter-spacing:.01em;color:rgba(255,255,255,.9); } .nav-drop-menu a:after{display:none} .nav-drop-menu a:hover{background:rgba(216,169,72,.16);color:var(--gold-soft)} /* ===== Capa padrão: cabeçalho ancorado à esquerda (1 lugar = todas as páginas) ===== Editar estes valores (ou colar do editor visual) reposiciona a capa em TODO o site. --edit-x:381 deixa a BORDA visível da placa alinhada com a borda esquerda do painel escuro do hero (.capa-hero::before, que vai 30px à esquerda do bloco → ~24px em telas largas). Em ≥1800px a placa e o painel coincidem exatamente. */ .layered-header{ --edit-x:381px;--edit-y:0px;--edit-scale:0.55;--edit-rotate:0deg;--edit-opacity:1; } .layered-header .header-clean-art{ --edit-x:-470px;--edit-y:-41px;--edit-scale:1.36;--edit-rotate:0deg;--edit-opacity:1; width:1545px;height:262px;aspect-ratio:auto; } .layered-header .brand-logo{ --edit-x:-607px;--edit-y:-125px;--edit-scale:1.06;--edit-rotate:0deg;--edit-opacity:1; } .layered-header .main-nav{ --edit-x:-323px;--edit-y:-103px;--edit-scale:2.01;--edit-rotate:0deg;--edit-opacity:1; width:635px;height:20px;aspect-ratio:auto; } .wa-card{ position:relative; z-index:3; display:flex; align-items:center; gap:clamp(7px,.72vw,13px); justify-self:end; min-width:0; padding-left:clamp(13px,1.3vw,26px); border-left:1px solid rgba(216,169,72,.95); transform:translate(var(--edit-x),var(--edit-y)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); transform-origin:center; opacity:var(--edit-opacity); } .wa-icon{ display:grid; place-items:center; width:clamp(30px,2.7vw,52px); aspect-ratio:1; border:1.5px solid var(--gold); border-radius:50%; color:var(--gold); filter:drop-shadow(0 3px 7px rgba(0,0,0,.65)); } .wa-icon svg{width:55%;height:55%} .wa-copy{ display:flex; flex-direction:column; gap:2px; color:#fff; text-shadow:0 3px 7px rgba(0,0,0,.76); white-space:nowrap; } .wa-copy b{ color:var(--gold-soft); font-size:clamp(.56rem,.66vw,.80rem); text-transform:uppercase; } .wa-copy span{ font-size:clamp(.64rem,.78vw,.94rem); font-weight:700; } .hero-content{ position:absolute; left:clamp(22px,4.4vw,84px); bottom:clamp(34px,5.6vw,78px); z-index:4; max-width:min(900px,90vw); padding-left:clamp(16px,1.4vw,26px); border-left:3px solid var(--gold); transform:translate(var(--edit-x),var(--edit-y)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); transform-origin:left center; opacity:var(--edit-opacity); } .hero-content h1{ margin:0; font-family:"Oswald",sans-serif; font-size:clamp(1.9rem,3.85vw,3.7rem); line-height:1.02; font-weight:600; text-transform:uppercase; text-shadow:0 4px 22px rgba(0,0,0,.68); } .hero-content h1 span, .hero-content h1 strong{display:block} .hero-content h1 strong{color:var(--gold)} .hero-content p{ margin:clamp(14px,1.4vw,22px) 0 clamp(22px,2.2vw,34px); color:rgba(255,255,255,.92); font-size:clamp(.95rem,1.18vw,1.3rem); text-shadow:0 2px 12px rgba(0,0,0,.7); } .hero-cta{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; min-height:40px; padding:9px clamp(15px,1.35vw,24px); border:1px solid rgba(193,15,18,.62); border-radius:0; color:#fff; background: radial-gradient(circle at 28% 18%,rgba(255,255,255,.10),transparent 30%), linear-gradient(180deg,#20282c 0%,var(--smoke) 52%,var(--smoke-deep) 100%); font-size:clamp(.64rem,.76vw,.86rem); font-weight:800; letter-spacing:.06em; text-transform:uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(193,15,18,.34), 0 16px 34px rgba(5,9,10,.24); transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease,border-color .25s ease; transform:translate(var(--edit-x),var(--edit-y)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); transform-origin:left center; opacity:var(--edit-opacity); } .hero-cta:before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 0 34%,rgba(255,42,52,.38) 46%,transparent 58% 100%); transform:translateX(-120%); transition:transform .58s cubic-bezier(.2,.8,.2,1); } .hero-cta:after{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1px; background:linear-gradient(90deg,transparent,var(--logo-red-soft),transparent); opacity:.78; } .hero-cta:hover{ color:#fff; border-color:rgba(255,42,52,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 22px 42px rgba(5,9,10,.30), 0 0 0 4px rgba(193,15,18,.09); transform:translate(var(--edit-x),calc(var(--edit-y) - 2px)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); } .hero-cta:hover:before{ transform:translateX(120%); } .content-band{ position:relative; padding:clamp(64px,7vw,112px) clamp(22px,5vw,92px); background: linear-gradient(90deg,rgba(4,12,14,.98),rgba(8,20,22,.94)), radial-gradient(80% 120% at 82% 0,rgba(216,169,72,.12),transparent 55%); border-top:1px solid rgba(255,255,255,.08); } .content-band.alt{ background: linear-gradient(90deg,rgba(10,16,18,.98),rgba(4,12,14,.94)), radial-gradient(70% 120% at 20% 0,rgba(95,202,186,.12),transparent 55%); } .content-inner{ width:min(1180px,100%); margin:0 auto; } .section-kicker{ display:block; margin-bottom:14px; color:var(--gold-soft); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .content-band h2{ max-width:850px; margin:0; font-family:"Oswald",sans-serif; font-size:clamp(2rem,3.7vw,4rem); font-weight:500; line-height:1.04; text-transform:uppercase; } .content-band p{ max-width:720px; margin:18px 0 0; color:rgba(255,255,255,.78); font-size:clamp(1rem,1.2vw,1.25rem); line-height:1.65; } .content-inner.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .content-inner article{ min-height:210px; padding:28px; border:1px solid rgba(170,230,222,.18); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); backdrop-filter:blur(10px); } .content-inner h3{ margin:0; color:#fff; font-size:1.25rem; text-transform:uppercase; } .section-whatsapp{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; margin-top:26px; padding:10px 18px; border:1px solid rgba(193,15,18,.62); border-radius:0; color:#fff; background: radial-gradient(circle at 28% 18%,rgba(255,255,255,.10),transparent 30%), linear-gradient(180deg,#20282c 0%,var(--smoke) 52%,var(--smoke-deep) 100%); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(193,15,18,.34), 0 16px 34px rgba(5,9,10,.22); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; } .section-whatsapp:before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 0 34%,rgba(255,42,52,.38) 46%,transparent 58% 100%); transform:translateX(-120%); transition:transform .58s cubic-bezier(.2,.8,.2,1); } .section-whatsapp:after{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1px; background:linear-gradient(90deg,transparent,var(--logo-red-soft),transparent); opacity:.78; } .section-whatsapp:hover{ transform:translateY(-2px); border-color:rgba(255,42,52,.9); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 22px 42px rgba(5,9,10,.28), 0 0 0 4px rgba(193,15,18,.09); } .section-whatsapp:hover:before{ transform:translateX(120%); } .ve-editing .editable-target{ outline:1px dashed rgba(239,198,101,.58); outline-offset:4px; cursor:move; } .ve-editing .header-clean-art{pointer-events:auto} .ve-editing .editable-target.is-edit-active{ outline:3px solid rgba(95,202,186,.98); outline-offset:7px; box-shadow:0 0 0 7px rgba(95,202,186,.18),0 0 34px rgba(95,202,186,.32); } .ve-editor-panel{ position:fixed; right:14px; top:auto; bottom:14px; z-index:80; width:min(390px,calc(100vw - 28px)); max-height:44vh; overflow:auto; padding:14px; border:1px solid rgba(95,202,186,.35); border-radius:8px; background:rgba(4,11,13,.88); color:#fff; box-shadow:0 18px 45px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); } .ve-editor-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .ve-editor-head strong{ display:block; font-size:.92rem; line-height:1.1; } .ve-editor-head span{ display:block; margin-top:4px; color:rgba(255,255,255,.62); font-size:.68rem; } .ve-editor-panel button, .ve-editor-panel select{ min-height:34px; border:1px solid rgba(239,198,101,.45); border-radius:6px; background:rgba(255,255,255,.08); color:#fff; font:700 .72rem "Montserrat",system-ui,Arial,sans-serif; } .ve-editor-panel button{ padding:0 10px; cursor:pointer; text-transform:uppercase; } .ve-editor-panel button:hover{ border-color:rgba(239,198,101,.9); background:rgba(216,169,72,.20); } .ve-select select{ width:100%; padding:0 10px; appearance:none; } .ve-quick-targets{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:10px; } .ve-quick-targets button{ min-height:30px; padding:0 6px; font-size:.62rem; } .ve-control{ display:grid; gap:6px; } .ve-control span{ display:flex; justify-content:space-between; color:rgba(255,255,255,.82); font-size:.68rem; font-weight:700; text-transform:uppercase; } .ve-control output{ color:var(--gold-soft); } .ve-control-grid{ display:grid; gap:10px; margin-top:12px; } .ve-control input[type="range"]{ width:100%; accent-color:var(--gold); } .ve-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; } .ve-status{ min-height:16px; margin:10px 0 0; color:rgba(255,255,255,.62); font-size:.68rem; line-height:1.35; } body:not(.ve-editing) .ve-editor-panel{ opacity:.74; } /* hambúrguer: escondido no desktop */ .nav-burger{display:none} /* ============ MOBILE / TABLET (<=1024px): barra + menu hambúrguer ============ */ @media (max-width:1024px){ /* placa de vidro larga não cabe no mobile */ .header-clean-art{display:none} /* cabeçalho vira barra no topo do hero */ .layered-header{ position:absolute; top:0; left:0; right:0; width:100%; min-height:0; height:auto; aspect-ratio:auto; transform:none !important; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px clamp(12px,4vw,18px); background:linear-gradient(180deg,rgba(8,15,17,.93),rgba(8,15,17,.74)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(95,202,186,.30); box-shadow:0 6px 20px rgba(0,0,0,.42); filter:none; } .brand-logo{transform:none !important; width:auto; min-height:0; justify-self:auto; flex:0 0 auto} .brand-logo img{width:auto; height:clamp(32px,8.5vw,44px); filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))} /* botão hambúrguer */ .nav-burger{ display:grid; place-items:center; width:46px; height:46px; padding:0; cursor:pointer; flex:0 0 auto; appearance:none; -webkit-appearance:none; margin:0; border:1.5px solid rgba(216,169,72,.7); border-radius:9px; background:rgba(216,169,72,.12); } .nav-burger svg{display:block} .nav-burger .ico-close{display:none} .nav-open .nav-burger .ico-open{display:none} .nav-open .nav-burger .ico-close{display:block} /* menu vira dropdown */ .main-nav{ transform:none !important; position:absolute; top:100%; left:0; right:0; width:100% !important; height:auto !important; flex-direction:column; align-items:stretch; gap:0; background:rgba(7,13,15,.98); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(95,202,186,.28); max-height:0; overflow:hidden; opacity:0; transition:max-height .32s ease,opacity .2s ease; box-shadow:0 16px 34px rgba(0,0,0,.5); } .nav-open .main-nav{max-height:80vh; opacity:1} .main-nav a{ width:100%; text-align:left; font-size:1rem; font-weight:600; letter-spacing:.03em; line-height:1; padding:15px clamp(16px,5vw,24px); border-left:none !important; border-bottom:1px solid rgba(255,255,255,.07); color:#fff; } .main-nav a:after{display:none} .main-nav a.is-active{color:var(--gold-soft); background:rgba(216,169,72,.10)} /* Dropdown "Trabalhos" vira acordeão no mobile */ .main-nav > * + *{border-left:none} .nav-drop{display:block; width:100%} .main-nav .nav-drop-trigger{ width:100%; justify-content:space-between; font-size:1rem; font-weight:600; letter-spacing:.03em; text-transform:none; line-height:1; padding:15px clamp(16px,5vw,24px); border-bottom:1px solid rgba(255,255,255,.07); color:#fff; } .nav-drop-menu{ position:static; transform:none !important; min-width:0; margin:0; padding:0; border:none; border-radius:0; box-shadow:none; background:rgba(0,0,0,.22); -webkit-backdrop-filter:none; backdrop-filter:none; opacity:1; visibility:visible; max-height:0; overflow:hidden; transition:max-height .3s ease; } .nav-drop.open .nav-drop-menu{max-height:64vh} .nav-drop-menu a{ padding:13px clamp(26px,7vw,38px); font-size:.94rem; font-weight:500; border-bottom:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.9); } .cover-slide{background-position:center center} /* painel do editor (editor.html) no mobile */ .ve-editor-panel{ right:10px; left:auto; top:auto; bottom:10px; width:min(340px,calc(100vw - 20px)); max-height:42vh; padding:10px; } .ve-editor-head{margin-bottom:8px} .ve-control-grid{gap:7px;margin-top:8px} .ve-actions{margin-top:9px;grid-template-columns:1fr 1fr} } /* ===== Vidro do lado direito (números WhatsApp) ===== */ .glass-direito{ position:absolute; z-index:5; right:clamp(10px,2.2vw,46px); top:clamp(120px,17vw,300px); width:min(48vw,860px); height:auto; pointer-events:auto; transform:translate(var(--edit-x),var(--edit-y)) rotate(var(--edit-rotate)) scale(var(--edit-scale)); transform-origin:center; opacity:var(--edit-opacity); filter:drop-shadow(0 16px 28px rgba(0,0,0,.45)); } @media (max-width:760px){ .glass-direito{right:8px;left:8px;width:auto;top:auto;bottom:18px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero-cta{transition:none} } /* ===== Hero na capa: breadcrumb + H1 + meta description (todas as páginas) ===== */ .capa-hero{ position:absolute;left:clamp(22px,3vw,54px);right:auto;top:33%;z-index:5; width:min(640px,calc(100% - 2*clamp(22px,3vw,54px))); color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5); } .capa-hero::before{content:"";position:absolute;inset:-40px -30px -30px;z-index:-1;pointer-events:none; background:radial-gradient(120% 120% at 6% 42%,rgba(4,8,10,.62),rgba(4,8,10,.18) 55%,transparent 72%)} .capa-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px; font:800 .74rem/1 "Montserrat",sans-serif;letter-spacing:.14em;text-transform:uppercase} .capa-crumbs a{color:#efc665;text-decoration:none} .capa-crumbs a:hover{color:#fff} .capa-crumbs span{color:rgba(255,255,255,.85)} .capa-crumbs .sep{color:rgba(255,255,255,.5)} .capa-hero h1{margin:0;color:#fff;font:800 clamp(2.1rem,4.6vw,4rem)/1.14 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;max-width:18ch;letter-spacing:0} .capa-desc{margin:18px 0 0;max-width:620px;color:rgba(255,255,255,.93);font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.62} @media (max-width:900px){ .capa-hero{top:auto;bottom:16%} } @media (max-width:600px){ .capa-hero{left:20px;right:20px;width:auto;bottom:14%;text-align:left} .capa-hero h1{max-width:12ch;font-size:clamp(1.55rem,6.8vw,2rem);white-space:normal;overflow-wrap:normal;word-break:normal} .capa-desc{max-width:32ch;font-size:.9rem;line-height:1.5;overflow-wrap:break-word} } /* ===== PADRÃO TOPBAR NO HERO (logo + menu dentro do painel do H1) — TODAS as páginas ===== Consolidado da home em 2026-06-17. Esconde o cabeçalho flutuante antigo (.layered-header) nas páginas públicas e usa o .hero-topbar dentro do .capa-hero. O editor.html (corpo sem classe home-white/inner-page) mantém o .layered-header editável. */ .home-white .layered-header,.inner-page .layered-header{display:none} @media (min-width:901px){ .capa-hero{top:18%} } .hero-topbar{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,1.6vw,28px);margin-bottom:34px} .ht-logo{display:inline-flex;flex:0 0 auto} .ht-logo img{height:50px;width:auto;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))} .ht-nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.1vw,18px)} .ht-nav a{color:#fff;text-decoration:none;font:600 .82rem/1 "Montserrat",sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .ht-nav a:hover{color:#efc665} .ht-nav .nav-drop-trigger{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;color:#fff;font:600 .82rem/1 "Montserrat",sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .ht-nav .nav-drop:hover .nav-drop-trigger{color:#efc665} .ht-nav > a,.ht-nav .nav-drop-trigger{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px} .capa-hero h1{line-height:1.2} .home-white .capa-hero h1,.inner-page .capa-hero h1{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:800;line-height:1.14;letter-spacing:0;max-width:18ch} .home-white .capa-crumbs,.home-white .capa-desc,.home-white .hero-topbar .ht-burger,.home-white .ht-nav a,.home-white .ht-nav .nav-drop-trigger{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif} .home-white .capa-index a{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif} .capa-index{width:100%;min-height:50px;position:relative;z-index:6;background:linear-gradient(180deg,#0c1214,#070b0c);border-top:1px solid rgba(95,202,186,.28);box-shadow:0 14px 30px rgba(0,0,0,.28)} .capa-index ul{margin:0 auto;list-style:none;padding:0 clamp(18px,4vw,72px);display:flex;justify-content:center;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;text-align:center} .capa-index ul::-webkit-scrollbar{display:none} .capa-index li{flex:0 0 auto} .capa-index a{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 14px;white-space:nowrap;color:rgba(255,255,255,.8);text-decoration:none;font:700 .74rem/1 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid transparent;text-align:center} .capa-index a:hover{color:#fff;border-bottom-color:#efc665} .ci-label{position:absolute;left:clamp(14px,2vw,40px);top:50%;transform:translateY(-50%);color:#efc665;font:700 clamp(.62rem,.7vw,.74rem)/1 "Montserrat",sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none} @media (max-width:600px){ .capa-hero h1{line-height:1.12} .home-white .capa-hero h1{max-width:16ch;min-height:9rem} } @media (max-width:900px){ .ci-label{display:none} .capa-index ul{justify-content:flex-start;text-align:left;padding:0 14px} } .ht-burger{display:none} /* Botões WhatsApp flutuantes globais, exibidos depois da capa */ .wa-float{ position:fixed;right:18px;bottom:18px;z-index:120; display:flex;flex-direction:column;gap:9px; opacity:0;visibility:hidden;transform:translateY(16px); transition:opacity .4s ease,transform .4s ease,visibility .4s ease; } .wa-float.is-on{opacity:1;visibility:visible;transform:none} @keyframes waFloatPulse{ 0%{transform:scale(.82);opacity:.72} 68%{transform:scale(1.34);opacity:0} 100%{transform:scale(1.34);opacity:0} } .wa-float a{ position:relative;isolation:isolate;overflow:visible;display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:11px 18px;border-radius:999px;text-decoration:none; color:#fff;background:linear-gradient(180deg,#27c265,#1faf54 55%,#0f7a3a); box-shadow:0 12px 26px rgba(15,122,58,.30),0 1px 0 rgba(255,255,255,.28) inset; transition:transform .24s ease,box-shadow .24s ease; } .wa-float a::after{content:"";position:absolute;inset:-7px;border:2px solid rgba(37,211,102,.5);border-radius:inherit;pointer-events:none;animation:waFloatPulse 1.55s ease-out infinite;will-change:transform,opacity} .wa-float a:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(15,122,58,.42)} .wa-float a:hover::after{animation-play-state:paused} .wa-float a svg{width:23px;height:23px;flex:0 0 auto} .wa-float a span{display:flex;flex-direction:column;line-height:1.06;text-align:center} .wa-float a small{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.88} .wa-float a b{font-size:.9rem;font-weight:800} @media (max-width:600px){ .wa-float{left:12px;right:12px;bottom:12px;flex-direction:row} .wa-float a{flex:1;justify-content:center;padding:10px 6px;gap:6px} .wa-float a small{display:none} .wa-float a b{font-size:.7rem} .wa-float a svg{width:18px;height:18px} } @media (prefers-reduced-motion:reduce){ .wa-float a::after{animation:none!important} } @media (max-width:900px){ /* .header-only-stage tem isolation:isolate (contexto próprio) e estava em z:auto, abaixo do conteúdo. Elevo esse contexto p/ o topbar fixo ficar acima de tudo ao rolar. */ .header-only-stage{z-index:60} .capa-hero{z-index:60} .wa-float a::after{animation:waFloatPulse 1.55s ease-out infinite !important} .capa-hero .hero-topbar{position:fixed;top:0;left:0;right:0;width:auto;max-width:none;box-sizing:border-box;z-index:50;margin:0;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:8px 120px 8px 12px;background:linear-gradient(180deg,rgba(8,15,17,.96),rgba(8,15,17,.82));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(95,202,186,.25)} .hero-topbar .ht-logo{min-width:0;max-width:150px} .hero-topbar .ht-logo img{height:34px;max-width:150px} .hero-topbar .ht-burger{position:absolute;top:8px;right:12px;z-index:120;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:96px;height:38px;margin-left:0;gap:6px;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.72);border-radius:9px;color:#fff;padding:0 10px;cursor:pointer;font:700 .74rem/1 "Montserrat",sans-serif;text-transform:uppercase;letter-spacing:.04em} .hero-topbar .ht-burger-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap} .hero-topbar .ht-burger svg{width:20px;height:20px;flex:0 0 auto} .hero-topbar .ht-nav{display:none} .hero-topbar.open .ht-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;z-index:80;background:rgba(7,13,15,.99);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(95,202,186,.25);box-shadow:0 16px 30px rgba(0,0,0,.5);padding:4px 0;max-height:calc(100vh - 54px);overflow:auto} .hero-topbar.open .ht-nav > a,.hero-topbar.open .ht-nav .nav-drop-trigger{display:flex;width:100%;justify-content:space-between;align-items:center;padding:14px 20px;text-decoration:none;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);font-size:.92rem} .hero-topbar.open .ht-nav .nav-drop{display:block;width:100%} .hero-topbar.open .ht-nav .nav-drop-menu{position:static;transform:none;opacity:1;visibility:visible;min-width:0;width:100%;max-height:0;overflow:hidden;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:rgba(255,255,255,.05);-webkit-backdrop-filter:none;backdrop-filter:none;transition:max-height .3s ease} .hero-topbar.open .ht-nav .nav-drop.open .nav-drop-menu{max-height:75vh} .hero-topbar.open .ht-nav .nav-drop-menu a{padding:12px 34px;font-size:.86rem;border-bottom:1px solid rgba(255,255,255,.05)} .hero-topbar.open .ht-nav .nav-drop-menu::before{display:none} } /* Footer global organizado: usado na home, páginas internas e mapa do site */ .ve-footer{ position:relative; z-index:2; background:#0b1011; color:#fff; border-top:1px solid rgba(239,198,101,.22); } .ve-footer::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg,rgba(255,255,255,.035),transparent 24%), repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 96px); opacity:.62; } .ve-footer-wrap{ position:relative; width:100%; max-width:none; margin:0; padding:clamp(38px,5vw,68px) clamp(24px,3vw,56px) 26px; } .ve-footer-grid{ display:grid; grid-template-columns:minmax(260px,1.24fr) minmax(150px,.82fr) minmax(160px,.82fr) minmax(220px,1.08fr) minmax(270px,1.2fr); gap:0; align-items:stretch; } .ve-footer-grid > *{ min-width:0; min-height:360px; padding:0 clamp(10px,.9vw,16px); } .ve-footer-grid > *:first-child{padding-left:0} .ve-footer-grid > *:last-child{padding-right:0} .ve-footer-grid > * + *{ border-left:0; } .ve-footer-brand img{ width:168px; height:auto; margin:0 0 16px; } .ve-footer p{ margin:0; color:rgba(255,255,255,.72); font:500 .95rem/1.7 "Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .ve-footer-rating{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:16px; color:rgba(255,255,255,.82); font:700 .86rem/1.35 "Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .ve-footer-rating-stars{ color:#ffb000; letter-spacing:.06em; text-shadow:0 0 12px rgba(255,176,0,.22); } .ve-footer-rating strong{color:#fff} .ve-footer-rating span:last-child{color:rgba(255,255,255,.68)} .ve-footer h2{ margin:0 0 14px; color:#fff; font:800 .76rem/1.2 "Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; } .ve-footer h2::after{ content:""; display:block; width:42px; height:2px; margin-top:10px; border-radius:2px; background:linear-gradient(90deg,#efc665,#c10f12); } .ve-footer nav{ display:grid; gap:9px; } .ve-footer a{ color:rgba(255,255,255,.82); text-decoration:none; font:600 .9rem/1.35 "Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .ve-footer a:hover{color:#efc665} .ve-footer-phones{ display:grid; grid-template-columns:1fr; gap:10px; width:100%; max-width:280px; margin-top:18px; } .ve-footer-phones a{ display:flex; align-items:center; justify-content:center; min-height:42px; padding:10px 12px; border-radius:10px; background:linear-gradient(180deg,#25c466,#159246); color:#fff; box-shadow:0 12px 26px rgba(15,122,58,.18); text-align:center; } .ve-footer-bottom{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); } .ve-footer-bottom p,.ve-footer-bottom a{ color:rgba(255,255,255,.62); font-size:.78rem; } .ve-footer-local{ display:grid; gap:7px; color:rgba(255,255,255,.72); font:500 .9rem/1.6 "Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .ve-footer-local strong{color:#efc665} .ve-footer-contact .ve-footer-field{ display:grid; gap:3px; } .ve-footer-contact-title{ margin:8px 0 2px; color:#fff; font:800 .76rem/1.2 "Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; } .ve-footer-contact-title::after{ content:""; display:block; width:42px; height:2px; margin-top:9px; border-radius:2px; background:linear-gradient(90deg,#efc665,#c10f12); } .ve-footer-contact-links{ display:grid; gap:3px; } .ve-footer-contact a{ overflow-wrap:anywhere; font-weight:700; } .ve-footer-contact .ve-footer-email{ display:inline-block; line-height:1.35; color:rgba(255,255,255,.82); font-weight:700; overflow-wrap:anywhere; } @media (min-width:981px){ .ve-footer-contact .ve-footer-email{ white-space:nowrap; overflow-wrap:normal; word-break:normal; } } @media (max-width:980px){ .ve-footer-grid{grid-template-columns:1fr 1fr} .ve-footer-grid > *{ min-height:auto; padding:16px; border-left:0; } .ve-footer-grid > *:nth-child(even){ border-left:0; } .ve-footer-grid > *:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); } } @media (max-width:620px){ .ve-footer-grid{grid-template-columns:1fr} .ve-footer-grid > *{ min-height:auto; padding:16px 0; border-left:0 !important; } .ve-footer-grid > * + *{ border-top:1px solid rgba(255,255,255,.14); } .ve-footer-phones{grid-template-columns:1fr} .ve-footer-bottom{display:grid} }