/* Executiva Business — Comunicação Visual Site institucional público (Blade). Tema escuro, acento laranja da marca. */ :root{ --bg:#0D0B0E; --bg-2:#111013; --surface:#141215; --surface-2:#1A181B; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06); --text:#FFFFFF; --muted:#9B9CA1; --muted-2:#6B6C72; --accent:#F26A1B; --accent-2:#FF8534; --radius:20px; --maxw:1360px; --ease:cubic-bezier(.22,1,.36,1); --tile-grid-line:rgba(255,255,255,.05); } /* ---- zona clara: hero e rodapé/CTA final continuam escuros (marca, impacto), as seções de conteúdo do meio (sobre/serviços/clientes/destaques no site, grade inteira no catálogo) ficam num tema claro — mais legível pra bastante texto/imagem seguidos. Reaproveita as mesmas variáveis, então cards, botões etc. não precisam de regra própria por tema. */ .light-theme{ background:var(--bg);color:var(--text); --bg:#FFFFFF; --bg-2:#F7F5F2; --surface:#F3F1ED; --surface-2:#EAE7E2; --line:rgba(13,11,14,.10); --line-2:rgba(13,11,14,.06); --text:#0D0B0E; --muted:#5B5A5F; --muted-2:#8B8A8F; --tile-grid-line:rgba(13,11,14,.05); } *{box-sizing:border-box} *{scrollbar-width:thin;scrollbar-color:var(--accent) transparent} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:#2a262b;border-radius:20px} ::selection{background:var(--accent);color:#fff} html{scroll-behavior:smooth} /* "lenis" fica na a instância inteira (não só durante o scroll, como "lenis-smooth"/"lenis-scrolling") — precisa desligar o scroll-behavior nativo o tempo todo, senão ele reanima por cima de cada ajuste que o Lenis já faz, e o scroll fica "bugado" (duas suavizações brigando). */ html.lenis{scroll-behavior:auto} body{ margin:0; background:var(--bg); color:var(--text); font-family:"Outfit",system-ui,sans-serif; font-optical-sizing:auto; font-weight:600; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} body.preloading{overflow:hidden} /* ---- preloader ---- */ #preloader{ position:fixed;inset:0;z-index:9999; display:flex;align-items:center;justify-content:center; background:var(--bg); transition:transform .85s var(--ease); } #preloader.done{transform:translateY(-100%);pointer-events:none} #preloader.hidden{display:none} html.no-preload #preloader{display:none} .preloader__mark{width:min(80vw,480px);height:auto;opacity:0;animation:preloaderIn .6s var(--ease) forwards .1s} .preloader__bar{position:absolute;left:0;right:0;bottom:0;width:100%;height:5px;background:var(--line-2);overflow:hidden} .preloader__bar span{display:block;height:100%;width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 14px rgba(242,106,27,.7); transition:width .3s ease-out; } @keyframes preloaderIn{to{opacity:1}} @media (prefers-reduced-motion:reduce){ #preloader{transition:opacity .4s linear} #preloader.done{transform:none;opacity:0} .preloader__mark{animation:none;opacity:1} } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,72px)} /* visível só pra leitor de tela/crawler — pra texto que já aparece de outra forma pro olho (ex.: dentro de uma foto), mas ainda precisa existir no DOM por acessibilidade/SEO */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .kicker{ font-size:12px;letter-spacing:.28em;text-transform:uppercase; color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:12px; } h1,h2,h3{margin:0;font-weight:600;line-height:1.05;letter-spacing:-.02em} .display{font-size:clamp(44px,7.2vw,116px);font-weight:600;line-height:.98;letter-spacing:-.03em} .h2{font-size:clamp(34px,4.6vw,68px);letter-spacing:-.025em;line-height:1.02} .lead{font-size:clamp(17px,1.4vw,20px);color:var(--muted);line-height:1.6;font-weight:600} /* ---- buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:12px;cursor:pointer;border:0; font-family:inherit;font-size:16px;font-weight:600;border-radius:999px; padding:18px 34px;transition:transform .3s var(--ease),background .3s,color .3s; white-space:nowrap; } .btn svg{width:18px;height:18px} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-2);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--text);transform:translateY(-2px)} .btn .arw{transition:transform .35s var(--ease)} .btn:hover .arw{transform:translate(4px,-4px)} /* ---- header ---- */ /* grid, não flex+space-between: com space-between o pill fica "no meio do espaço que sobra" entre logo e burger, não no centro real da página — como a logo (bem mais larga) e o burger (só o círculo) têm larguras bem diferentes, esse meio-do-espaço-que-sobra empurra o pill pro lado do burger. grid-template-columns:1fr auto 1fr força as duas colunas das pontas a terem a mesma largura entre si (por maior que seja a logo), deixando a coluna do meio (o pill) sempre centralizada de verdade. */ .header{ position:fixed;inset:0 0 auto 0;z-index:60; display:grid;grid-template-columns:1fr auto 1fr;align-items:center; padding:22px clamp(20px,5vw,56px); transition:background .4s,backdrop-filter .4s,border-color .4s; border-bottom:1px solid transparent; } .header.scrolled{background:rgba(13,11,14,.72);backdrop-filter:blur(14px);border-bottom-color:var(--line-2)} .header .logo{grid-column:1;height:38px;display:inline-flex;position:relative;z-index:70;justify-self:start} .header .burger{grid-column:3;justify-self:end} .header .logo img{height:100%;width:auto} .header .logo,.header .navpill{transition:opacity .35s var(--ease),transform .35s var(--ease)} /* rolando pra baixo: some tudo, fica só o burger (z-index:70, fora deste seletor) */ .header.nav-hidden{background:transparent;backdrop-filter:none;border-bottom-color:transparent} .header.nav-hidden .logo,.header.nav-hidden .navpill{opacity:0;transform:translateY(-14px);pointer-events:none} /* menu overlay aberto: mesmo tratamento do nav-hidden (o overlay já tem sua própria logo + nav-big, então a logo/navpill do header viram duplicata) */ .header.menu-open{background:transparent;backdrop-filter:none;border-bottom-color:transparent} .header.menu-open .logo,.header.menu-open .navpill{opacity:0;pointer-events:none} .navpill{ display:flex;align-items:center;gap:4px; background:rgba(25,22,25,.55);border:1px solid var(--line); backdrop-filter:blur(14px);border-radius:999px;padding:7px; } /* display:flex + align-items:center no próprio link (não só no .navpill pai): centraliza o texto pela caixa do flex, não pela meia-entrelinha do line-height do font — com "normal", a folga que a fonte reserva acima e abaixo do texto não é simétrica, e por padding sozinho o texto parece flutuar mais pra cima/baixo dentro do pill. */ .navpill a{font-size:15px;color:var(--muted);padding:10px 20px;border-radius:999px;transition:color .25s,background .25s;display:flex;align-items:center;line-height:1} .navpill a:hover,.navpill a.is-active{color:#fff;background:rgba(255,255,255,.06)} .burger{ z-index:70;width:56px;height:56px;border-radius:50%;background:var(--surface); border:1px solid var(--line);display:flex;align-items:center;justify-content:center; cursor:pointer;transition:transform .3s,background .3s;flex-direction:column;gap:6px; } .burger:hover{transform:scale(1.06);background:var(--surface-2)} .burger span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .35s var(--ease),opacity .25s} .burger.open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)} .burger.open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)} /* ---- fullscreen menu overlay ---- */ .menu{ position:fixed;inset:0;z-index:55;background:var(--bg); padding:120px clamp(20px,5vw,72px) 48px; display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end; clip-path:inset(0 0 100% 0);pointer-events:none; transition:clip-path .8s var(--ease); } .menu.open{clip-path:inset(0 0 0 0);pointer-events:auto} /* logo do menu é independente do .header .logo: o header pode estar com o logo escondido (rolou a página antes de abrir o menu, ver .nav-hidden), mas dentro do overlay ele sempre aparece — mesma posição/tamanho do header pra manter a continuidade visual ao abrir/fechar. */ .menu .menu-logo{position:absolute;top:22px;left:clamp(20px,5vw,56px);z-index:2} .menu .menu-logo img{height:38px;width:auto;display:block} .menu .nav-big{display:flex;flex-direction:column} .menu .nav-big .lbl{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2);border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:26px} .menu .nav-big a{ font-size:clamp(40px,6.5vw,86px);font-weight:500;line-height:1.08;letter-spacing:-.02em; color:#fff;width:fit-content;position:relative;transition:padding-left .35s var(--ease),color .3s; } .menu .nav-big a::before{content:"";position:absolute;left:-2px;top:50%;width:0;height:2px;background:var(--accent);transform:translateY(-50%);transition:width .35s var(--ease)} .menu .nav-big a:hover{padding-left:56px;color:var(--accent)} .menu .nav-big a:hover::before{width:40px} .menu .side{display:flex;flex-direction:column;gap:28px} .menu .feat{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/11;border:1px solid var(--line)} .menu .feat .cap{position:absolute;left:14px;bottom:12px;font-size:13px;color:#fff;display:flex;gap:8px;align-items:center;z-index:2} .menu .meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;font-size:14px} .menu .meta .t{color:var(--muted-2);font-size:11px;letter-spacing:.18em;text-transform:uppercase;grid-column:1/-1;margin-bottom:2px} .menu .meta a,.menu .meta span{color:var(--muted)} .menu .meta a:hover{color:var(--accent)} /* ---- footer ---- */ .footer{border-top:1px solid var(--line-2);padding:80px 0 40px;} .footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px 40px} .footer .logo{height:46px;width:auto;margin-bottom:22px} .footer h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin:0 0 18px;font-weight:600} .footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .footer li a{color:var(--muted);font-size:16px;transition:color .25s} .footer li a:hover{color:var(--accent)} .footer .bottom{display:flex;justify-content:space-between;align-items:center;margin-top:64px;padding-top:26px;border-top:1px solid var(--line-2);color:var(--muted-2);font-size:13px;flex-wrap:wrap;gap:12px} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .reveal.in{opacity:1;transform:none} /* hero intro, logos e cards (catálogo/destaques): animados via GSAP (site.js). Só ficam escondidos por CSS quando "js" está na (script inline no ) — sem JS, o conteúdo já nasce visível em vez de depender do script pra aparecer. */ html.js .hero-anim, html.js .brand-tile, html.js .stagger-card{opacity:0;transform:translateY(28px)} /* tilt/zoom da imagem no hover do card (GSAP anima x/y/scale via JS, isso só define a origem e evita que ela vaze do card arredondado) */ .card .media-tile, .pcard .media-tile{transform-origin:center;will-change:transform} /* ---- floating orbs (atmosphere, replaces photography) ---- */ .orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none} .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform} .orb.a{width:520px;height:520px;top:-140px;right:-80px;background:radial-gradient(circle,rgba(242,106,27,.55),transparent 70%)} .orb.b{width:420px;height:420px;bottom:-160px;left:-100px;background:radial-gradient(circle,rgba(255,133,52,.35),transparent 70%)} .orb.c{width:300px;height:300px;top:40%;left:44%;background:radial-gradient(circle,rgba(242,106,27,.25),transparent 70%)} /* ---- grain / noise overlay ---- */ .grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---- marquee strip ---- */ .marquee{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);overflow:hidden;padding:26px 0;background:var(--bg-2)} .marquee .track{display:flex;gap:0;width:max-content;animation:marq 34s linear infinite} .marquee:hover .track{animation-play-state:paused} .marquee .item{display:inline-flex;align-items:center;gap:34px;padding-right:34px;font-size:clamp(26px,3.4vw,46px);font-weight:600;letter-spacing:-.02em;white-space:nowrap} .marquee .item .txt{color:var(--muted-2);transition:color .3s} .marquee:hover .item .txt{color:var(--text)} .marquee .star{color:var(--accent);font-size:.62em} @keyframes marq{to{transform:translateX(-50%)}} /* ---- media tile: gradient + grid + icon, stands in for photography ---- */ .media-tile{ position:relative;width:100%;height:100%;overflow:hidden; display:flex;align-items:center;justify-content:center; background: radial-gradient(120% 100% at 12% 0%, rgba(242,106,27,.30), transparent 55%), radial-gradient(100% 90% at 100% 100%, rgba(255,133,52,.16), transparent 60%), var(--surface); } .media-tile::before{ content:"";position:absolute;inset:0; background-image:linear-gradient(var(--tile-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--tile-grid-line) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 100%); } .media-tile svg{position:relative;z-index:1;color:var(--accent);opacity:.9} .media-tile.lg svg{width:30%;height:30%} .media-tile.md svg{width:26%;height:26%} .media-tile.sm svg{width:22%;height:22%} .media-tile img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover} /* ---- brands / empresas atendidas: logos soltos, sem cartão/borda ao redor. Cores originais convertidas pro relevo (silhueta branca): grayscale + brightness(0) + invert deixa só a forma do logo, sem a cor de cada marca brigando com o fundo escuro — opacidade sobe no hover. flex-wrap (em vez de grid fixo) porque a lista de clientes ainda vai crescer. ---- */ .brand-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px 64px;margin-top:64px} .brand-tile{display:flex;align-items:center;justify-content:center} .brand-tile img{width:auto;max-width:180px;filter:grayscale(1) brightness(0) invert(1);opacity:.5;transition:opacity .3s} .brand-tile:hover img{opacity:1} @media (max-width:920px){ .navpill{display:none} .menu{grid-template-columns:1fr;align-items:start;gap:44px;padding-top:110px} .footer .grid{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .footer .grid{grid-template-columns:1fr} .header{padding:16px 20px} } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .hero-anim,.brand-tile,.stagger-card{opacity:1;transform:none} .orb{animation:none} .hero__video{display:none} .marquee .track{animation:none} .rotating-badge__ring{animation:none!important} *{scroll-behavior:auto} } /* ===== HERO ===== */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg)} .hero__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;pointer-events:none} .hero__video-overlay{position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(60% 60% at 50% 42%, rgba(13,11,14,.8), transparent 72%), linear-gradient(180deg, rgba(13,11,14,.6) 0%, rgba(13,11,14,.7) 55%, var(--bg) 97%); } .hero .orbs{z-index:1} .hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(60% 55% at 78% 18%, rgba(242,106,27,.34), transparent 60%), radial-gradient(50% 60% at 12% 88%, rgba(242,106,27,.16), transparent 62%); } .hero__grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 100%); } .hero__inner{position:relative;z-index:3;text-align:center;padding:96px clamp(20px,5vw,40px) 128px;max-width:1180px} .hero .kicker{justify-content:center;margin-bottom:26px} .hero h1{margin:0 auto} .hero h1 .em{color:var(--accent)} .hero .lead{max-width:52ch;margin:28px auto 40px} .hero .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .scrollcue{position:absolute;left:clamp(20px,5vw,56px);bottom:32px;z-index:3;display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;letter-spacing:.04em} .scrollcue .dot{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center} .scrollcue .dot svg{width:16px;height:16px;animation:bob 1.4s ease-in-out infinite alternate} @keyframes bob{to{transform:translateY(5px)}} .hero__badge{position:absolute;right:clamp(20px,5vw,56px);bottom:32px;z-index:3;text-align:right;color:var(--muted);font-size:13px;display:none} @media(min-width:1024px){.hero__badge{display:block}} @media(max-height:640px){.scrollcue,.hero__badge{display:none}} /* ===== SECTION SHELL ===== */ section{position:relative} #servicos,#destaques,#contato{scroll-margin-top:96px} .sec{padding:clamp(80px,11vw,160px) 0} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:64px} .sec-head .lead{max-width:40ch} /* ===== ABOUT ===== */ .about-intro .lead{margin:26px 0 0;max-width:46ch} .about-intro .lead + .lead{margin-top:20px} /* ===== ABOUT GALLERY (seção "Quem somos") ================================ Trilho horizontal full-bleed. Cada foto é fixa em 1055x815 (proporção do material fornecido) — por isso quem dirige o tamanho é a LARGURA em vw (--gallery-w) e a altura vem de aspect-ratio, nunca o contrário: dirigir por vh estoura a largura da tela em viewports estreitos, já que a foto é mais larga que alta. Duas camadas: sem JS (ou se o GSAP falhar ao carregar), ".about-gallery" é o próprio scroller nativo (overflow-x:auto + scroll-snap), touch/ trackpad/scrollbar já funcionam de graça. Com GSAP+Draggable disponíveis, site.js soma ".js-drag": desliga o scroll nativo (troca por overflow:hidden) e quem passa a mover ".about-gallery__track" é transform/x via Draggable — arrastar com o mouse usando scrollLeft direto em pointermove empacava (evento mais rápido que o layout, e "pointerleave" cortava o gesto no meio); Draggable resolve isso de forma madura (captura de ponteiro, bounds, snap, sem jank). O primeiro item começa perto da borda esquerda da tela (só uma margem pequena, não colado) — o "efeito de curiosidade" no fim de cada item (o próximo aparece cortado na borda direita) sinaliza que dá pra rolar, já que a largura do item (--gallery-w) é menor que o viewport. No fim do trilho, o próprio scroll nativo (ou o cálculo em JS no modo Draggable, que desconta essa margem lateral) trava no último item com a mesma margem na direita, sem sobrar vão maior que ela. */ .about-gallery-sec{position:relative;background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .about-gallery{ --gallery-w:58vw; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:64px clamp(16px,3vw,32px); scrollbar-width:none; } .about-gallery::-webkit-scrollbar{display:none} .about-gallery__track{display:flex;gap:48px;align-items:stretch;width:max-content} .about-gallery.js-drag{overflow:hidden;scroll-snap-type:none;cursor:grab} .about-gallery.js-drag.dragging{cursor:grabbing} .about-gallery__item{position:relative;flex:none;width:var(--gallery-w);aspect-ratio:1055/815;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface);scroll-snap-align:start;margin:0} /* Sem isso, o Chrome soma o snap ("start" no primeiro item) ao padding lateral no load e cancela a margem sozinho — trava o scroll já nascendo deslocado exatamente pelo valor do padding, colando a foto de novo. */ .about-gallery__item:first-child,.about-gallery__item:last-child{scroll-snap-align:none} .about-gallery__item img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none} .about-gallery__foot{position:absolute;left:0;right:0;bottom:36px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none} .about-gallery__foot>*{pointer-events:auto} .about-gallery__tag{background:rgba(13,11,14,.7);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:#fff} /* fundo sempre escuro — texto fixo em branco, não segue --text do tema claro */ .about-gallery__tag .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .about-gallery__tag .v{font-size:18px;font-weight:600;margin-top:3px} .about-gallery__controls{display:flex;gap:10px} .gnav{width:52px;height:52px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(13,11,14,.7);backdrop-filter:blur(8px);border:1px solid var(--line);color:#fff;cursor:pointer;transition:background .3s,border-color .3s,transform .3s} .gnav:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)} .gnav svg{width:20px;height:20px} @media(max-width:760px){ .about-gallery{--gallery-w:78vw;padding:40px clamp(12px,4vw,24px)} .about-gallery__track{gap:24px} .about-gallery__foot{position:static;margin-top:20px} } @media(prefers-reduced-motion:reduce){.about-gallery{scroll-behavior:auto}} /* ===== SERVICES ===== */ .svcs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden} .svc{background:var(--bg);padding:clamp(30px,3.4vw,48px);transition:background .35s} .svc:hover{background:var(--surface)} .svc .n{font-size:13px;color:var(--muted-2);font-weight:600} .svc h3{font-size:clamp(22px,2.2vw,30px);margin:16px 0 12px;font-weight:600;letter-spacing:-.02em} .svc h3 .icn{color:var(--accent);margin-right:10px} .svc p{color:var(--muted);font-size:16px;line-height:1.6;margin:0;max-width:44ch} @media(max-width:760px){.svcs{grid-template-columns:1fr}} /* ===== FEATURED PANELS ===== */ .panels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .pcard{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:transform .4s var(--ease),border-color .35s;display:block} .pcard:hover{transform:translateY(-6px);border-color:rgba(242,106,27,.5)} .pcard .img{position:relative;aspect-ratio:4/3;overflow:hidden} .pcard .chip{position:absolute;top:14px;left:14px;z-index:2;background:rgba(13,11,14,.72);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;letter-spacing:.02em;color:#fff} /* fundo sempre escuro (foto por trás) — texto fixo, não segue --text do tema claro */ .pcard .body{padding:22px 22px 24px} .pcard .city{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600} .pcard h3{font-size:22px;margin:8px 0 14px;font-weight:600;letter-spacing:-.01em} .pcard .specs{display:flex;gap:18px;color:var(--muted);font-size:14px;border-top:1px solid var(--line-2);padding-top:14px} .pcard .specs b{color:var(--text);font-weight:600;display:block;font-size:15px} .pcard .specs .t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} @media(max-width:900px){.panels{grid-template-columns:1fr 1fr}} @media(max-width:560px){.panels{grid-template-columns:1fr}} /* ---- rotating badge: "ver catálogo completo", texto girando sem parar (GSAP) ---- */ .badge-wrap{display:flex;justify-content:center;margin-top:64px} .rotating-badge{position:relative;width:168px;height:168px;display:flex;align-items:center;justify-content:center} .rotating-badge__ring{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%} .rotating-badge__ring path{fill:none} .rotating-badge__ring text{fill:var(--accent);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700} .rotating-badge__core{position:relative;z-index:1;width:62px;height:62px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:var(--bg);transition:transform .35s var(--ease)} .rotating-badge__core svg{width:22px;height:22px} .rotating-badge:hover .rotating-badge__core{transform:scale(1.12)} /* ---- card shine on hover ---- */ .pcard .img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%); transform:translateX(-120%);transition:transform .7s var(--ease)} .pcard:hover .img::after{transform:translateX(120%)} /* ===== CTA band — seção inteira full-bleed com a foto, sem "card" por cima (nada de border-radius/border/moldura: a imagem é o fundo da seção inteira, não um elemento dentro dela). aspect-ratio trava a altura da seção numa proporção — em vez de usar sempre a proporção exata da foto (1639x960, bem larga), ela fica mais "em pé" (aspect-ratio menor) conforme a tela estreita. Isso, combinado com object-fit:cover, funciona como um zoom centralizado: quanto mais quadrada a caixa fica, mais cover precisa cortar as laterais da foto pra preencher a altura, ampliando o centro (onde está o outdoor) em vez de encolher a foto inteira — que é o que "contain" fazia e deixava tudo (foto E botões) minúsculo em telas pequenas. */ .ctaband{position:relative;aspect-ratio:1639/960;text-align:center;background:#0D0B0E} .ctaband__bg{position:absolute;inset:0;z-index:0} .ctaband__bg img{width:100%;height:100%;object-fit:cover;object-position:center} .ctaband .wrap{position:absolute;left:0;right:0;top:84%;z-index:2} /* botões ficam sobre a pista/rastros de luz da foto (parte de baixo), não sobre o outdoor — fundo translúcido escuro pra continuar legível ali */ .ctaband .btn-ghost{background:rgba(13,11,14,.55);backdrop-filter:blur(6px)} .ctaband h2{margin:0 auto 20px;max-width:18ch} .ctaband .lead{max-width:46ch;margin:0 auto 38px} @media(max-width:760px){ .ctaband{aspect-ratio:3/2} .ctaband .wrap{top:78%} .ctaband .btn{padding:13px 22px;font-size:14px;gap:8px} .ctaband .btn svg{width:15px;height:15px} .ctaband .cta-row{gap:10px} } @media(max-width:480px){ .ctaband{aspect-ratio:1/1} .ctaband .wrap{top:74%} } /* ===== PAGE HEAD (catálogo) ===== */ .pagehead{padding:clamp(130px,16vw,190px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden} .pagehead::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(50% 70% at 82% 0%,rgba(242,106,27,.20),transparent 60%)} .pagehead .orbs{z-index:1} .pagehead .inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap} .pagehead h1{font-weight:600;letter-spacing:-.03em;line-height:.98;margin-top:22px} .pagehead h1 .em{color:var(--accent)} .pagehead .lead{max-width:40ch;margin-bottom:6px} /* ===== FILTER BAR ===== */ .filters{background:rgba(13,11,14,.82);backdrop-filter:blur(14px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .filters .bar{padding-top:20px;padding-bottom:20px;display:flex;flex-direction:column;gap:14px} .frow{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .frow .flabel{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);min-width:66px;font-weight:600} .chip{border:1px solid var(--line);background:transparent;color:var(--muted);font-family:inherit;font-size:14px;font-weight:500; padding:9px 18px;border-radius:999px;cursor:pointer;transition:all .25s;white-space:nowrap} .chip:hover{color:#fff;border-color:rgba(255,255,255,.35)} .chip.active{background:var(--accent);border-color:var(--accent);color:#fff} .filters .count{color:var(--muted);font-size:14px;margin-left:auto} .filters .count b{color:#fff} @media (max-width:560px){ .filters .bar{padding-top:14px;padding-bottom:14px;gap:10px} .frow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .frow::-webkit-scrollbar{display:none} .frow .flabel{flex:0 0 auto;min-width:0} .chip{flex:0 0 auto} .filters .count{flex:0 0 auto;margin-left:14px} } /* ===== CATALOG GRID ===== */ .catalog{padding:48px 0 clamp(70px,9vw,120px)} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .35s} .card:hover{transform:translateY(-6px);border-color:rgba(242,106,27,.5)} .card .img{position:relative;aspect-ratio:4/3;overflow:hidden} .card .chip-type{position:absolute;top:14px;left:14px;z-index:2;background:rgba(13,11,14,.74);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;color:#fff} .card .avail{position:absolute;top:14px;right:14px;z-index:2;display:flex;align-items:center;gap:7px;background:rgba(13,11,14,.74);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12px;font-weight:600;color:#fff} /* estas duas: fundo sempre escuro (foto por trás) — texto fixo, não segue --text do tema claro */ .card .avail .d{width:8px;height:8px;border-radius:50%;background:#3ec07a} .card .avail.busy .d{background:#e0b53e} .card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .card .city{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600} .card h3{font-size:21px;margin:8px 0 16px;font-weight:600;letter-spacing:-.01em;line-height:1.15} .card .specs{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--line-2);padding-top:16px;margin-top:auto} .card .specs .t{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)} .card .specs b{color:var(--text);font-weight:600;font-size:15px;display:block;margin-top:3px} .card .foot{display:flex;gap:10px;margin-top:20px} .card .foot .btn{flex:1;justify-content:center;padding:14px 18px;font-size:15px} .empty{text-align:center;padding:80px 20px;color:var(--muted);display:none} .empty.show{display:block} .empty h3{font-size:26px;color:var(--text);margin-bottom:10px} @media(max-width:900px){.grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.grid{grid-template-columns:1fr}} .ctaband .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}