/* ═══════════════════════════════════════════════════════════ RRDesignBikes — Folha de estilo principal Identidade: preto profundo + acid lime, Bebas Neue display. Assinatura: galeria coverflow 3D (#coverflow). ═══════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --lime:#C5F135; --black:#050505; --white:#F2F2F0; --muted:#6a6a6a; --panel:#0b0b0b; --bd:rgba(255,255,255,.06); --bd2:rgba(255,255,255,.12); --violet:#7864ff; --ease:cubic-bezier(.25,.46,.45,.94); --pad:clamp(1.2rem,5vw,3rem); } html{scroll-behavior:smooth} body{ background:var(--black);color:var(--white); font-family:"DM Sans",system-ui,sans-serif; overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ::selection{background:var(--lime);color:#000} /* Acessibilidade */ .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} .skip-link{position:fixed;top:-100px;left:1rem;z-index:9999;background:var(--lime);color:#000; padding:.7rem 1.2rem;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.08em; text-transform:uppercase;transition:top .2s} .skip-link:focus{top:1rem} :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px} /* Decoração 3D de fundo (Three.js) — atrás de tudo, não interativa */ #ambient-3d{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55} #scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--lime);z-index:9990} /* ═══════════ PRELOADER ═══════════ */ /* Só exibe quando há JS (classe .js no ) para poder removê-lo depois */ #preloader{display:none} .js #preloader{position:fixed;inset:0;z-index:9900;background:var(--black);display:flex; flex-direction:column;align-items:center;justify-content:center; transition:opacity .9s var(--ease),transform .9s cubic-bezier(.76,0,.24,1)} #preloader.out{opacity:0;transform:translateY(-100%);pointer-events:none} #preloader.gone{display:none} .pre-word{font-family:"Bebas Neue",sans-serif;overflow:hidden;line-height:.92;font-size:clamp(4rem,14vw,13rem);letter-spacing:-.02em;color:var(--white)} .pre-word span{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.76,0,.24,1)} .pre-word span.up{transform:translateY(0)} .pre-word-lime{color:var(--lime)} .pre-phrase{width:min(640px,82vw);height:auto;margin-top:1.8rem;opacity:0;transition:opacity .8s .5s} .pre-phrase.show{opacity:.85} .pre-bar{width:120px;height:1px;background:var(--bd2);margin-top:2rem;position:relative;overflow:hidden; opacity:0;transition:opacity .4s} .pre-bar.show{opacity:1} .pre-bar::after{content:"";position:absolute;inset:0 100% 0 0;background:var(--lime)} .pre-bar.fill::after{animation:preFill 2.4s var(--ease) forwards} @keyframes preFill{to{inset:0 0 0 0}} .pre-btn{font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase; color:#000;background:var(--lime);border:none;padding:.7rem 1.8rem;margin-top:2rem;cursor:pointer; opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s,background .2s} .pre-btn.show{opacity:1;transform:translateY(0)} .pre-btn:hover{background:var(--white)} /* ═══════════ CURSOR CUSTOMIZADO ═══════════ */ /* Ativado por JS apenas em ponteiro fino (desktop). Touch mantém o cursor nativo. */ #cursor{display:none} body.custom-cursor{cursor:none} body.custom-cursor a,body.custom-cursor button,body.custom-cursor [role="button"]{cursor:none} body.custom-cursor #cursor{display:block;position:fixed;inset:0;z-index:9999;pointer-events:none;mix-blend-mode:difference} #cursor i{position:absolute;top:0;left:0;background:var(--lime);border-radius:50%;transform:translate(-50%,-50%)} .cursor-dot{width:8px;height:8px;transition:width .2s,height .2s} .cursor-ring{width:44px;height:44px;opacity:.25;transition:width .3s,height .3s,opacity .3s} body.cursor-hover .cursor-dot{width:2px;height:2px} body.cursor-hover .cursor-ring{width:78px;height:78px;opacity:.12} /* Glow lime (fora do mix-blend-mode) */ #cursor-glow{ display:none;position:fixed;pointer-events:none;z-index:9996; width:90px;height:90px;border-radius:50%; background:radial-gradient(circle,rgba(197,241,53,.22) 0%,transparent 68%); transform:translate(-50%,-50%); transition:width .3s,height .3s; } body.custom-cursor #cursor-glow{display:block} body.cursor-hover #cursor-glow{width:130px;height:130px} /* Rastro */ .cursor-trail{ display:none;position:fixed;pointer-events:none;z-index:9995; width:5px;height:5px;border-radius:50%; background:var(--lime); transform:translate(-50%,-50%); will-change:left,top,opacity; } body.custom-cursor .cursor-trail{display:block} /* ─── Botões / utilitários ─── */ .btn{font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase; padding:.85rem 1.6rem;display:inline-flex;align-items:center;gap:.55rem;transition:all .25s var(--ease); border:1px solid transparent;cursor:pointer} .btn-prime{background:var(--lime);color:#000;font-weight:700} .btn-prime:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(197,241,53,.3)} .btn-ghost{border-color:var(--bd2);color:var(--muted)} .btn-ghost:hover{border-color:var(--lime);color:var(--lime)} .btn-link{color:var(--muted);padding:.85rem 0;border-bottom:1px solid var(--bd2)} .btn-link:hover{color:var(--white);border-color:rgba(255,255,255,.4)} .section-num{font-family:"Space Mono",monospace;font-size:.55rem;letter-spacing:.24em; text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:.8rem;margin-bottom:2.4rem} .section-num::after{content:"";width:2.4rem;height:1px;background:var(--lime)} em{font-style:normal;color:var(--lime)} /* ─── Header ─── */ .site-header{position:fixed;inset:0 0 auto 0;z-index:800;display:flex;align-items:center; justify-content:space-between;padding:1.5rem var(--pad);transition:all .4s var(--ease)} .site-header.scrolled{background:rgba(5,5,5,.92);backdrop-filter:blur(18px); padding:.85rem var(--pad);border-bottom:1px solid var(--bd)} .brand{display:flex;align-items:center;gap:.7rem} .brand-mark{width:22px;height:auto} .brand-text{font-family:"Space Mono",monospace;font-size:.55rem;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,255,255,.45)} .main-nav ul{display:flex;gap:2.2rem;list-style:none} .main-nav a{font-family:"Space Mono",monospace;font-size:.56rem;letter-spacing:.13em; text-transform:uppercase;color:rgba(255,255,255,.4);transition:color .2s} .main-nav a:hover{color:var(--white)} .header-cta{display:flex;gap:1rem;align-items:center} /* ═══════════════════════════════════════════════════════════ HERO — palco 3D: perspective real + camadas no eixo Z ═══════════════════════════════════════════════════════════ */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:0 var(--pad) clamp(3rem,7vh,6rem);overflow:hidden;z-index:1; perspective:1200px;perspective-origin:70% 38%} .video-hero-container { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform; transform: scale(1.05); transition: transform 0.2s var(--ease); } .video-bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; } .video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--black) 100%); } .hero-bg-split{position:absolute;inset:0;display:grid;grid-template-columns:54% 46%;z-index:-1} .hero-bg-split span:first-child{background:var(--black)} .hero-bg-split span:last-child{background:#080808} .hero-grid{position:absolute;inset:0;z-index:-1; background-image:repeating-linear-gradient(0deg,transparent 0 79px,rgba(255,255,255,.012) 80px), repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.012) 80px)} .hero-ambient-type{position:absolute;right:-2%;top:46%;transform:translateY(-50%);z-index:0; font-family:"Bebas Neue",sans-serif;font-size:34vw;line-height:.8;letter-spacing:-.04em; color:rgba(255,255,255,.018);user-select:none;white-space:nowrap} /* Palco 3D do produto */ .hero-stage{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;pointer-events:none} .hero-glow{position:absolute;right:4%;bottom:2%;width:62%;height:62%; background:radial-gradient(ellipse at 60% 60%,rgba(197,241,53,.10) 0%,transparent 62%); transform:translateZ(-220px);will-change:transform} /* Produto flutua à frente; main.js gira em rotateX/rotateY conforme o mouse */ .hero-product{position:absolute;right:-2%;bottom:4%;width:min(70%,1100px); transform-style:preserve-3d;will-change:transform; transition:transform .25s ease-out} .hero-product img{width:100%;height:auto;transform:translateZ(60px); filter:drop-shadow(0 60px 90px rgba(0,0,0,.85)) drop-shadow(0 0 120px rgba(197,241,53,.10))} .hero-copy{position:relative;z-index:10;transform:translateZ(0);max-width:1400px} .eyebrow{font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase; color:var(--lime);display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem} .eyebrow::before{content:"";width:2rem;height:1px;background:var(--lime)} .hero-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(4.5rem,13vw,12.5rem); line-height:.84;letter-spacing:-.01em} .hero-title .ghost{color:rgba(255,255,255,.18)} /* Frase principal da marca, em destaque sob o título */ .hero-phrase{width:min(560px,72vw);height:auto;margin-top:1.8rem;opacity:.9} .hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-top:2.4rem;flex-wrap:wrap} .hero-sub{max-width:340px;color:var(--muted);font-weight:300;font-size:.92rem;line-height:1.8} .hero-actions{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap} .hero-rail{position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);writing-mode:vertical-rl; font-family:"Space Mono",monospace;font-size:.46rem;letter-spacing:.28em;text-transform:uppercase; color:rgba(255,255,255,.1)} .scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.4rem} .scroll-line{width:1px;height:2.6rem;background:linear-gradient(var(--lime),transparent); animation:scrollPulse 2.2s ease-in-out infinite;transform-origin:top} @keyframes scrollPulse{0%,100%{transform:scaleY(.35);opacity:.3}50%{transform:scaleY(1);opacity:1}} .scroll-label{font-family:"Space Mono",monospace;font-size:.44rem;letter-spacing:.22em; text-transform:uppercase;color:rgba(255,255,255,.18)} /* ─── Marquee ─── */ .marquee{position:relative;z-index:1;background:var(--lime);padding:.65rem 0;overflow:hidden;display:flex} .marquee-track{display:flex;white-space:nowrap;animation:marquee 26s linear infinite} .marquee-track span{font-family:"Bebas Neue",sans-serif;font-size:.95rem;letter-spacing:.18em; color:#000;padding:0 1.8rem} .marquee-track .sep{color:rgba(0,0,0,.25)} @keyframes marquee{to{transform:translateX(-50%)}} /* ─── Manifesto ─── */ .manifesto{position:relative;z-index:1;background:var(--black);display:flex;flex-wrap:wrap; gap:3rem 6rem;align-items:center;padding:clamp(5rem,12vh,9rem) var(--pad)} .manifesto-left{flex:1 1 320px} .manifesto-name{font-family:"Bebas Neue",sans-serif;font-size:clamp(3.5rem,8vw,8rem);line-height:.86} .manifesto-right{flex:2 1 420px;display:flex;flex-direction:column;gap:2rem;max-width:640px} .manifesto-quote{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.6;color:rgba(255,255,255,.6); font-weight:300;border-left:2px solid var(--lime);padding-left:1.8rem} .manifesto-quote strong{color:var(--white);font-weight:400} .manifesto-body{font-size:.9rem;line-height:1.9;color:var(--muted);font-weight:300;max-width:460px} /* ═══════════════════════════════════════════════════════════ ★ GALERIA COVERFLOW 3D — peça de assinatura ★ Cards posicionados em 3D real; o central encara o usuário, os laterais recuam e giram (rotateY) criando profundidade. ═══════════════════════════════════════════════════════════ */ .showcase{position:relative;z-index:1;background:var(--black);padding:clamp(5rem,11vh,8rem) 0 4rem;overflow:hidden} .showcase-head{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end;justify-content:space-between; padding:0 var(--pad);margin-bottom:3rem} .showcase-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(2.8rem,6vw,5.5rem);line-height:.9} .showcase-desc{max-width:340px;color:var(--muted);font-weight:300;font-size:.85rem;line-height:1.8} .coverflow{position:relative;width:100%} /* O palco em perspectiva: aqui mora o efeito 3D do carrossel */ .coverflow-track{position:relative;height:clamp(360px,52vh,560px);width:100%; transform-style:preserve-3d;perspective:1600px;cursor:grab;touch-action:pan-y} .coverflow-track:active{cursor:grabbing} .cf-card{position:absolute;top:50%;left:50%;width:clamp(280px,42vw,560px); height:clamp(340px,48vh,520px);margin:0; transform:translate(-50%,-50%);transform-style:preserve-3d; transition:transform .7s var(--ease),opacity .7s var(--ease),filter .7s var(--ease); will-change:transform,opacity} .cf-figure{position:relative;width:100%;height:100%;margin:0;overflow:hidden;border-radius:14px; background:linear-gradient(160deg,#101010,#070707);border:1px solid var(--bd2); box-shadow:0 40px 90px rgba(0,0,0,.7);transform-style:preserve-3d} .cf-figure img, .cf-figure model-viewer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 42%; padding:1.5rem;transform:translateZ(40px)} /* Plaqueta de texto flutua à frente (translateZ) — efeito glass */ .cf-meta{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.6rem 1.4rem; background:linear-gradient(transparent,rgba(5,5,5,.92));transform:translateZ(70px); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .cf-loc{font-family:"Space Mono",monospace;font-size:.48rem;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.45);display:block;margin-bottom:.4rem} .cf-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:.03em;line-height:1} .cf-cat{font-family:"Space Mono",monospace;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase; color:var(--lime);margin-top:.45rem} /* Brilho dinâmico (glare) controlado por main.js */ .cf-figure::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px; background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.18),transparent 55%); opacity:var(--glare,0);transition:opacity .3s} /* Reflexo no "chão" */ .cf-reflection{position:absolute;left:8%;right:8%;top:calc(100% + 6px);height:42%; background:linear-gradient(rgba(197,241,53,.06),transparent 70%);filter:blur(8px); transform:translateZ(-40px) scaleY(-1);opacity:.5;border-radius:14px} /* Estados aplicados via classe pelo JS (com fallback para data-pos) */ .cf-card[data-pos="0"]{transform:translate(-50%,-50%) translateZ(60px) rotateY(0) scale(1);opacity:1;filter:none;z-index:5} .cf-card[data-pos="0"]{--glare:.14} .cf-card[data-pos="-1"]{transform:translate(-50%,-50%) translateX(-58%) translateZ(-160px) rotateY(42deg) scale(.82);opacity:.55;filter:brightness(.65);z-index:4} .cf-card[data-pos="1"]{transform:translate(-50%,-50%) translateX(58%) translateZ(-160px) rotateY(-42deg) scale(.82);opacity:.55;filter:brightness(.65);z-index:4} .cf-card[data-pos="-2"]{transform:translate(-50%,-50%) translateX(-104%) translateZ(-360px) rotateY(52deg) scale(.64);opacity:.28;filter:brightness(.45);z-index:3} .cf-card[data-pos="2"]{transform:translate(-50%,-50%) translateX(104%) translateZ(-360px) rotateY(-52deg) scale(.64);opacity:.28;filter:brightness(.45);z-index:3} .cf-card[data-pos="hidden"]{transform:translate(-50%,-50%) translateZ(-600px) scale(.4);opacity:0;pointer-events:none;z-index:1} .coverflow-controls{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:2.6rem;position:relative;z-index:20} .cf-btn{width:46px;height:46px;border:1px solid var(--bd2);background:transparent;color:var(--white); font-size:1.2rem;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center} .cf-btn:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)} .cf-pips{display:flex;gap:.55rem;align-items:center} .cf-pip{width:20px;height:2px;background:rgba(255,255,255,.16);border:none;padding:0;cursor:pointer;transition:all .3s} .cf-pip[aria-selected="true"]{background:var(--lime);width:36px} /* ─── Feature / split ─── */ .feature{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;min-height:90vh;overflow:hidden} .feature-reverse .feature-visual{order:2} .feature-visual{position:relative;overflow:hidden;background:#080808;display:flex;align-items:center;justify-content:center} .feature-visual img{width:100%;height:120%;object-fit:contain;will-change:transform} .feature-glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at center,rgba(197,241,53,.06),transparent 62%)} .feature-glow-violet{background:radial-gradient(ellipse at center,rgba(120,100,255,.07),transparent 62%)} .feature-content{padding:clamp(3rem,6vw,5rem);display:flex;flex-direction:column;justify-content:center;background:var(--black)} .feature-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(3rem,7vw,8rem);line-height:.86;margin-bottom:2rem} .feature-desc{font-size:.88rem;line-height:1.9;color:var(--muted);font-weight:300;max-width:400px;margin-bottom:2rem} .tag-list,.pill-list{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem} .tag-list li{font-family:"Space Mono",monospace;font-size:.48rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(197,241,53,.6);border:1px solid rgba(197,241,53,.2);padding:.3rem .6rem;transition:background .25s} .tag-list li:hover{background:rgba(197,241,53,.08)} .link-arrow{font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase; color:var(--lime);display:inline-flex;gap:.5rem;transition:gap .25s} .link-arrow:hover{gap:.9rem} /* ─── Hall of Fame (bento grid 3D tilt) ─── */ .hof{position:relative;z-index:1;background:var(--black);padding:clamp(5rem,11vh,8rem) 0} .hof-head{ display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end; justify-content:space-between; padding:0 var(--pad);margin-bottom:clamp(2rem,5vw,3.5rem) } .hof-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(2.6rem,6vw,5.5rem);line-height:.9} .hof-desc{max-width:340px;color:var(--muted);font-weight:300;font-size:.82rem;line-height:1.8} /* ── Bento grid 4 colunas, 3 linhas ── */ .hof-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(180px,20vw,280px); gap:3px; } /* Row 1: wide(1-2) + regular(3) + regular(4) */ .hof-card:nth-child(1){grid-column:1/3} /* Row 2: regular(1) + regular(2) + wide(3-4) */ .hof-card:nth-child(6){grid-column:3/5} /* Row 3: wide(1-2) + wide(3-4) */ .hof-card:nth-child(7){grid-column:1/3} .hof-card:nth-child(8){grid-column:3/5} /* ── Card base ── */ .hof-card{ position:relative;overflow:hidden; background:#080808; transform-style:preserve-3d;will-change:transform; cursor:default; } /* Imagem */ .hof-card img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;padding:1rem; object-position:center; transform:translateZ(20px) scale(1); transition:transform .7s var(--ease),filter .5s; } .hof-card:hover img{ transform:translateZ(20px) scale(1.07); filter:brightness(.65); } /* Gradiente permanente (fundo sutil) */ .hof-card::before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(5,5,5,.9) 0%,rgba(5,5,5,.2) 45%,transparent 70%); transition:opacity .4s; } .hof-card:hover::before{ background:linear-gradient(to top,rgba(5,5,5,.97) 0%,rgba(5,5,5,.65) 55%,rgba(5,5,5,.1) 100%); } /* Badge numerado (canto superior esquerdo) */ .hof-badge{ position:absolute;top:1rem;left:1rem;z-index:3; font-family:"Space Mono",monospace;font-size:.46rem; letter-spacing:.18em;color:var(--lime); border:1px solid rgba(197,241,53,.3); background:rgba(5,5,5,.7); padding:.22rem .5rem; transform:translateZ(50px); transition:background .3s,border-color .3s; } .hof-card:hover .hof-badge{ background:rgba(197,241,53,.12); border-color:var(--lime); } /* Linha lime superior (desliza no hover) */ .hof-card::after{ content:"";position:absolute;top:0;left:0;z-index:4; width:0;height:2px;background:var(--lime); transition:width .55s cubic-bezier(.25,.46,.45,.94); } .hof-card:hover::after{width:100%} /* Painel de info */ .hof-info{ position:absolute;left:0;right:0;bottom:0; padding:1.2rem 1.4rem 1.3rem;z-index:3; transform:translateZ(60px) translateY(6px); transition:opacity .4s,transform .4s var(--ease); opacity:0; } .hof-card:hover .hof-info{opacity:1;transform:translateZ(60px) translateY(0)} .hof-year{ font-family:"Space Mono",monospace;font-size:.44rem; letter-spacing:.18em;text-transform:uppercase; color:var(--lime);display:block;margin-bottom:.3rem; } .hof-info h3{ font-family:"Bebas Neue",sans-serif; font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:.03em;margin:0 0 .28rem;line-height:1.05; } .hof-info p{ font-family:"Space Mono",monospace;font-size:.44rem; letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.4); } /* ─── Stats ─── */ .stats{position:relative;z-index:1;background:var(--lime);padding:clamp(3.5rem,8vh,6rem) var(--pad)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,.12);margin:0} .stat{background:var(--lime);padding:2.5rem 1.5rem;text-align:center} .stat-val{font-family:"Bebas Neue",sans-serif;font-size:clamp(3rem,6.5vw,6.5rem);line-height:.9;color:#000;margin:0} .stat-lbl{font-family:"Space Mono",monospace;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase; color:rgba(0,0,0,.55);margin-top:.5rem;display:block} /* ─── Estúdio ─── */ .studio{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;min-height:90vh;overflow:hidden} .studio-visual{position:relative;overflow:hidden;background:#060606;display:flex;align-items:center;justify-content:center} .studio-visual img{width:100%;height:118%;object-fit:contain;will-change:transform} .studio-glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 100%,rgba(197,241,53,.06),transparent 60%)} .studio-content{padding:clamp(3rem,6vw,5rem);display:flex;flex-direction:column;justify-content:center;background:var(--black)} .studio-logo{margin-bottom:2rem;opacity:.75;width:min(300px,70%);height:auto} .studio-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(2.2rem,4.4vw,4rem);line-height:.92;margin-bottom:1.8rem} .studio-p{font-size:.86rem;line-height:1.9;color:var(--muted);font-weight:300;max-width:420px} .studio-p+.studio-p{margin-top:1.2rem} .pill-list{margin-top:2.4rem} .pill-list li{font-family:"Space Mono",monospace;font-size:.48rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.32);border:1px solid var(--bd);padding:.34rem .76rem;transition:all .25s} .pill-list li:hover{color:var(--lime);border-color:rgba(197,241,53,.3)} /* ─── Contato ─── */ .contact{position:relative;z-index:1;background:#070707;padding:clamp(5rem,12vh,9rem) var(--pad);overflow:hidden} .contact-ambient{position:absolute;right:-2rem;bottom:-5rem;font-family:"Bebas Neue",sans-serif; font-size:clamp(14rem,28vw,28rem);line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.012);pointer-events:none} .contact-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end} .contact-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(3.5rem,9vw,9rem);line-height:.88;margin-top:1.5rem} .contact-sub{color:var(--muted);font-weight:300;font-size:.86rem;line-height:1.8;margin-top:1.4rem;max-width:330px} .contact-links{display:flex;flex-direction:column;font-style:normal} .contact-links a{display:flex;align-items:center;gap:1.6rem;padding:1.5rem 0;border-bottom:1px solid var(--bd); position:relative;transition:padding .3s} .contact-links a:first-child{border-top:1px solid var(--bd)} .contact-links a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--lime);transition:width .5s var(--ease)} .contact-links a:hover::after{width:100%} .contact-links a:hover .cl-name{color:var(--lime)} .contact-links a:hover .cl-arr{color:var(--lime);transform:translateX(5px)} .cl-plat{font-family:"Space Mono",monospace;font-size:.46rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.3);width:4.4rem;flex-shrink:0} .cl-name{font-family:"Bebas Neue",sans-serif;font-size:1.5rem;letter-spacing:.03em;transition:color .3s} .cl-arr{margin-left:auto;color:rgba(255,255,255,.15);transition:all .3s} /* ─── Footer ─── */ .site-footer{position:relative;z-index:1;background:var(--black);border-top:1px solid var(--bd); display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;padding:2.5rem var(--pad)} .footer-mark{opacity:.3} .footer-nav{display:flex;gap:1.8rem;flex-wrap:wrap} .footer-nav a{font-family:"Space Mono",monospace;font-size:.46rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25);transition:color .2s} .footer-nav a:hover{color:var(--lime)} .footer-copy{font-family:"Space Mono",monospace;font-size:.46rem;letter-spacing:.1em;color:rgba(255,255,255,.16)} /* ═══════════ REVEAL (scroll) ═══════════ */ .reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:transform,opacity} .reveal{transform:translateY(26px)} .reveal-left{transform:translateX(-28px)} .reveal-right{transform:translateX(28px)} .reveal.in,.reveal-left.in,.reveal-right.in{opacity:1;transform:none;will-change:auto} [data-delay="1"]{transition-delay:.12s} [data-delay="2"]{transition-delay:.24s} [data-delay="3"]{transition-delay:.36s} [data-delay="4"]{transition-delay:.48s} /* ─── Social Rail (Barra Social Lateral) ─── */ .srail { position: fixed; left: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 700; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .sr-b { width: 1px; height: 2rem; background: linear-gradient(transparent, rgba(197, 241, 53, 0.4)); } .sr-b.bot { background: linear-gradient(rgba(197, 241, 53, 0.4), transparent); } .sib { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; position: relative; transition: border-color .3s, transform .3s, background .3s; background: rgba(5, 5, 5, 0.6); backdrop-filter: blur(5px); } .sib:hover { border-color: var(--lime); background: rgba(197, 241, 53, 0.06); transform: translateX(4px); } .sib:hover svg { fill: var(--lime); } .sib:hover::after { opacity: 1; transform: translateX(0); } .sib svg { width: 11px; height: 11px; fill: rgba(255, 255, 255, .28); transition: fill .3s; } .sib::after { content: attr(data-l); position: absolute; left: calc(100% + 10px); font-family: 'Space Mono', monospace; font-size: .44rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); white-space: nowrap; opacity: 0; transform: translateX(-5px); transition: opacity .25s, transform .25s; pointer-events: none; } @media (max-width: 900px) { .srail { display: none; } } /* ─── Processo de Design (Seção 07) ─── */ .process { padding: 10rem var(--pad); background: var(--black); position: relative; overflow: hidden; } .proc-header { text-align: center; margin-bottom: 8rem; } .proc-hl { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 7vw, 7rem); line-height: 0.92; color: #fff; margin-top: 1.5rem; } .proc-hl em { color: var(--lime); font-style: normal; } .proc-track { position: relative; display: flex; flex-direction: column; gap: 0; max-width: 900px; margin: 0 auto; } .proc-track::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(197, 241, 53, 0.4) 10%, rgba(197, 241, 53, 0.4) 90%, transparent); transform: translateX(-50%); } .proc-step { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 0; padding: 3rem 0; position: relative; } .proc-step:nth-child(odd) .ps-content { text-align: right; padding-right: 3rem; } .proc-step:nth-child(even) .ps-content { grid-column: 3; text-align: left; padding-left: 3rem; } .proc-step:nth-child(even) .ps-node { grid-column: 2; } .proc-step:nth-child(even) .ps-empty { grid-column: 1; grid-row: 1; } .ps-node { grid-column: 2; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } .ps-dot { width: 14px; height: 14px; border: 2px solid var(--lime); border-radius: 50%; background: var(--black); position: relative; z-index: 2; transition: background 0.3s; } .proc-step:hover .ps-dot { background: var(--lime); } .ps-num { position: absolute; font-family: 'Space Mono', monospace; font-size: 0.46rem; letter-spacing: 0.14em; color: rgba(197, 241, 53, 0.4); white-space: nowrap; bottom: -22px; } .ps-phase { font-family: 'Space Mono', monospace; font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin-bottom: 0.5rem; } .ps-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 0.04em; color: #fff; margin-bottom: 0.5rem; } .ps-desc { font-size: 0.8rem; line-height: 1.75; color: var(--muted); font-weight: 300; max-width: 280px; } .proc-step:nth-child(odd) .ps-desc { margin-left: auto; } @media (max-width: 768px) { .proc-track::before { left: 20px; transform: none; } .proc-step { grid-template-columns: 40px 1fr; gap: 0; padding: 2rem 0; } .proc-step:nth-child(odd) .ps-content, .proc-step:nth-child(even) .ps-content { grid-column: 2; text-align: left; padding: 0 0 0 1.5rem; } .proc-step:nth-child(even) .ps-node, .proc-step:nth-child(odd) .ps-node { grid-column: 1; justify-content: flex-start; } .proc-step:nth-child(odd) .ps-desc { margin-left: 0; } .ps-num { left: 40px; bottom: 0; } } /* ─── Disciplinas / O que Projetamos (Seção 08) ─── */ .disciplines { padding: 9rem 0; background: #0d0d0d; overflow: hidden; } .disc-header { padding: 0 var(--pad); margin-bottom: 5rem; } .disc-hl { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.91; color: #fff; } .disc-sub { font-size: 0.86rem; line-height: 1.82; color: var(--muted); max-width: 400px; font-weight: 300; margin-top: 1.2rem; } .disc-strip { display: flex; gap: 1px; background: var(--bd); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .disc-strip::-webkit-scrollbar { display: none; } .disc-item { flex-shrink: 0; width: 280px; min-height: 420px; background: var(--black); display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem 2rem; position: relative; overflow: hidden; cursor: default; transition: background 0.4s; } .disc-item:hover { background: rgba(197, 241, 53, 0.03); } .disc-item::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--lime); transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .disc-item:hover::before { width: 100%; } .di-num { font-family: 'Space Mono', monospace; font-size: 0.5rem; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.15); margin-bottom: auto; padding-bottom: 3rem; display: block; } .di-icon { position: absolute; top: 2rem; left: 2rem; opacity: 0.12; font-family: 'Bebas Neue', sans-serif; font-size: 6rem; color: #fff; line-height: 1; letter-spacing: -0.02em; pointer-events: none; } .di-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.65rem; letter-spacing: 0.04em; color: #fff; margin-bottom: 0.5rem; line-height: 1.05; transition: color 0.3s; } .disc-item:hover .di-name { color: var(--lime); } .di-sub { font-size: 0.76rem; line-height: 1.68; color: var(--muted); font-weight: 300; } /* ═══════════ RESPONSIVO ═══════════ */ @media(max-width:1024px){ .hof-grid{grid-template-columns:repeat(2,1fr)} /* reset explicit cols */ .hof-card:nth-child(1), .hof-card:nth-child(6), .hof-card:nth-child(7), .hof-card:nth-child(8){grid-column:span 1} /* row 1: wide still takes full row */ .hof-card:nth-child(1){grid-column:1/3} .hof-card:nth-child(6){grid-column:1/3} .hof-card:nth-child(7){grid-column:1/3} .hof-card:nth-child(8){grid-column:1/3} } @media(max-width:820px){ .main-nav,.header-cta .btn-ghost,.hero-rail{display:none} /* Hero: reposiciona a moto no topo para não sobrepor o texto */ .hero-product{width:78%;right:50%;transform:translateX(50%);bottom:auto;top:9%;opacity:.55} .feature,.studio{grid-template-columns:1fr} .feature-reverse .feature-visual{order:0} .feature-visual,.studio-visual{min-height:54vh} .contact-inner{grid-template-columns:1fr;gap:2.5rem;align-items:start} .stats-grid{grid-template-columns:repeat(2,1fr)} .cf-card[data-pos="-2"],.cf-card[data-pos="2"]{opacity:0;pointer-events:none} .cf-card[data-pos="-1"]{transform:translate(-50%,-50%) translateX(-44%) translateZ(-120px) rotateY(38deg) scale(.78)} .cf-card[data-pos="1"]{transform:translate(-50%,-50%) translateX(44%) translateZ(-120px) rotateY(-38deg) scale(.78)} } @media(max-width:520px){ .hof-grid{grid-template-columns:1fr} .hof-card:nth-child(1), .hof-card:nth-child(6), .hof-card:nth-child(7), .hof-card:nth-child(8){grid-column:span 1} .stats-grid{grid-template-columns:1fr 1fr} .cf-card{width:78vw;height:42vh} } /* ═══════════ GALERIA — SPOTLIGHT MINIMALISTA ═══════════ */ .gallery{ position:relative;z-index:1;background:#050505; padding:clamp(5rem,11vh,8rem) 0; } .gallery-head{ display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end; justify-content:space-between;padding:0 var(--pad);margin-bottom:clamp(2.5rem,5vw,4rem); } .gallery-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(2.8rem,6vw,5.5rem);line-height:.9} .gallery-head-right{display:flex;flex-direction:column;gap:.8rem;align-items:flex-end;text-align:right} .gallery-desc{max-width:300px;color:var(--muted);font-weight:300;font-size:.82rem;line-height:1.8} .gallery-count{ font-family:"Space Mono",monospace;font-size:.48rem;letter-spacing:.22em; text-transform:uppercase;color:rgba(197,241,53,.4); border:1px solid rgba(197,241,53,.15);padding:.26rem .68rem; } /* ── Grid: 4 colunas uniformes, proporção portrait ── */ .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.035); /* cor do gap = linhas de grade sutis */ } /* ── Card base ── */ .gal-item{ position:relative;overflow:hidden; background:#050505; aspect-ratio:3/4; border:none;padding:0;cursor:pointer;display:block; -webkit-tap-highlight-color:transparent; } /* Lime glow: spotlight de baixo — o efeito principal */ .gal-item::before{ content:"";position:absolute; bottom:-35%;left:50%; transform:translateX(-50%); width:110%;height:75%; background:radial-gradient(ellipse at center, rgba(197,241,53,.22) 0%, rgba(197,241,53,.06) 35%, transparent 68%); opacity:0;z-index:1;pointer-events:none; transition:opacity .7s var(--ease),bottom .7s var(--ease); } .gal-item:hover::before, .gal-item:focus-visible::before{opacity:1;bottom:-18%} /* Linha na base com glow lime */ .gal-item::after{ content:"";position:absolute;bottom:0;left:0;z-index:4; width:0;height:1px; background:var(--lime); box-shadow:0 0 8px rgba(197,241,53,.7),0 0 28px rgba(197,241,53,.25); transition:width .6s cubic-bezier(.25,.46,.45,.94); } .gal-item:hover::after, .gal-item:focus-visible::after{width:100%} /* Imagem: flutua no espaço escuro (contain + padding) */ .gal-item img{ position:absolute; inset:0; width:100%; height:calc(100% - 2.6rem); /* reserva espaço para o footer */ object-fit:contain; padding:1.4rem 1.2rem .8rem; z-index:2; transition:transform .75s cubic-bezier(.25,.46,.45,.94), filter .6s; will-change:transform; } .gal-item:hover img, .gal-item:focus-visible img{ transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 24px 48px rgba(197,241,53,.15)) drop-shadow(0 0 80px rgba(197,241,53,.08)); } /* Número ghost no canto superior — principal decoração */ .gal-num{ position:absolute;top:.6rem;left:.9rem;z-index:3; font-family:"Bebas Neue",sans-serif; font-size:clamp(2.2rem,3.5vw,3rem); line-height:1;letter-spacing:-.01em; color:rgba(255,255,255,.05); pointer-events:none; transition:color .55s,text-shadow .55s; } .gal-item:hover .gal-num, .gal-item:focus-visible .gal-num{ color:rgba(197,241,53,.14); text-shadow:0 0 20px rgba(197,241,53,.3),0 0 60px rgba(197,241,53,.1); } /* Footer strip: mínimo — só categoria + ano */ .gal-info{ position:absolute;bottom:0;left:0;right:0;height:2.6rem; padding:0 .9rem;z-index:3; display:flex;align-items:center;justify-content:space-between; border-top:1px solid rgba(255,255,255,.045); background:rgba(5,5,5,.55); transition:border-top-color .35s; } .gal-item:hover .gal-info, .gal-item:focus-visible .gal-info{ border-top-color:rgba(197,241,53,.18); } .gal-cat{ font-family:"Space Mono",monospace;font-size:.4rem; letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.28); transition:color .3s; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:75%; } .gal-item:hover .gal-cat, .gal-item:focus-visible .gal-cat{color:var(--lime)} .gal-year{ font-family:"Space Mono",monospace;font-size:.4rem; letter-spacing:.1em;color:rgba(255,255,255,.16); transition:color .3s;flex-shrink:0; } .gal-item:hover .gal-year, .gal-item:focus-visible .gal-year{color:rgba(197,241,53,.45)} /* ── Responsivo ── */ @media(max-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:580px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} .gallery-head-right{align-items:flex-start;text-align:left} } /* ═══════════ LIGHTBOX ═══════════ */ .lightbox{ position:fixed;inset:0;z-index:9800; display:flex;align-items:center;justify-content:center; padding:clamp(1rem,3vw,2rem); } .lightbox[hidden]{display:none} .lb-backdrop{ position:absolute;inset:0; background:rgba(3,3,3,.96); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); cursor:pointer; } /* Botão fechar */ .lb-close{ position:absolute;top:1.2rem;right:1.2rem;z-index:4; width:46px;height:46px; border:1px solid var(--bd2);background:rgba(5,5,5,.85); color:var(--white);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:border-color .2s,background .2s,transform .3s; } .lb-close:hover{border-color:var(--lime);background:rgba(197,241,53,.1);transform:rotate(90deg)} .lb-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} /* Setas de navegação */ .lb-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:52px;height:52px; border:1px solid var(--bd2);background:rgba(5,5,5,.75); color:rgba(255,255,255,.55);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all .25s var(--ease); } .lb-prev{left:1.2rem} .lb-next{right:1.2rem} .lb-nav:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-50%) scale(1.08)} .lb-nav svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} /* Figura central */ .lb-figure{ position:relative;z-index:3; max-width:min(1100px,88vw); display:flex;flex-direction:column;align-items:center;gap:1rem; animation:lbIn .4s var(--ease) both; } @keyframes lbIn{ from{opacity:0;transform:scale(.93) translateY(10px)} to {opacity:1;transform:scale(1) translateY(0)} } .lb-img{ max-width:100%;max-height:78vh;object-fit:contain;display:block; border:1px solid rgba(255,255,255,.06); } .lb-caption{ font-family:"Space Mono",monospace;font-size:.48rem; letter-spacing:.16em;text-transform:uppercase; color:var(--lime);text-align:center; } /* Contador */ .lb-counter{ position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%); z-index:4;font-family:"Space Mono",monospace;font-size:.44rem; letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.25);white-space:nowrap; } /* ═══════════ SELECTED PARTNERS ═══════════ */ .partners{ padding:clamp(5rem,11vh,8rem) 0; overflow:hidden; } .partners-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:3rem; padding:0 clamp(1.5rem,5vw,6rem); margin-bottom:clamp(3rem,6vh,5rem); } .partners-title{ font-family:"Bebas Neue",sans-serif; font-size:clamp(2.8rem,6vw,5rem); line-height:.92; letter-spacing:-.01em; color:var(--white); } .partners-title em{color:var(--lime);font-style:normal} .partners-info{ display:flex;flex-direction:column;gap:1.1rem;max-width:46ch;padding-top:.4rem; } .partners-sub{ color:var(--white); font-size:clamp(.86rem,1.1vw,.98rem); line-height:1.7; font-weight:300; } .partners-body{ color:var(--muted); font-size:clamp(.78rem,.95vw,.86rem); line-height:1.85; font-weight:300; } /* Dual marquee tracks */ .partners-tracks{ display:flex; flex-direction:column; gap:clamp(.8rem,1.5vh,1.4rem); } .pt-row{ overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%); } .pt-track{ display:flex; align-items:center; width:max-content; animation:ptLTR 90s linear infinite; } .pt-row-2 .pt-track{animation:ptRTL 110s linear infinite} .pt-item{ display:flex; align-items:center; white-space:nowrap; padding:0 clamp(2rem,4vw,4rem); opacity:.28; transition:opacity .5s var(--ease), filter .5s var(--ease); cursor:default; user-select:none; } .pt-item img{ height:clamp(18px,2vw,28px); width:clamp(60px,8vw,110px); display:block; object-fit:contain; object-position:center; filter:brightness(0) invert(1); } .pt-item:hover{opacity:.8} .pt-item:hover img{filter:brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(30deg)} /* Row 1 mais destaque */ .pt-row-1 .pt-item{opacity:.65} .pt-row-1 .pt-item img{ height:clamp(24px,2.8vw,40px); width:clamp(80px,11vw,150px); } .pt-row-1 .pt-item:hover{opacity:1} .industry-tagline{ text-align:center; font-family:"Bebas Neue",sans-serif; font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:.18em; color:rgba(255,255,255,.12); padding:clamp(2.5rem,5vh,4rem) var(--pad) 0; } .pt-sep{ color:rgba(197,241,53,.2); font-family:"Bebas Neue",sans-serif; font-size:.9rem; line-height:1; flex-shrink:0; } /* Scale + slide reveal exclusivo dos tracks (sem blur — iOS Safari falha ao compositar blur+animation) */ .partners .partners-tracks.reveal{ transform:translateY(22px) scale(.984); transition:opacity 1.5s var(--ease),transform 1.5s var(--ease); } .partners .partners-tracks.reveal.in{ transform:none; } @keyframes ptLTR{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes ptRTL{from{transform:translateX(-50%)}to{transform:translateX(0)}} @media(max-width:680px){ .partners-head{flex-direction:column;gap:1.5rem} .pt-item{font-size:clamp(1.1rem,5vw,1.4rem)} } /* ─── Menu Mobile (hambúrguer) ─── */ .nav-toggle{ display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px; width:40px;height:40px;background:transparent; border:1px solid var(--bd2);cursor:pointer;padding:8px; z-index:850;flex-shrink:0; } @media(max-width:820px){.nav-toggle{display:flex}} .nav-toggle span{ display:block;width:18px;height:1px; background:var(--white); transition:transform .3s var(--ease),opacity .2s; } .nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} html.menu-open{overflow:hidden;touch-action:none} .mobile-menu{ position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000; background:#050505; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem; padding:5rem var(--pad) 3rem; opacity:0;pointer-events:none; transform:translateY(-14px); transition:opacity .35s ease,transform .35s ease; } .mobile-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)} .mobile-menu-close{ position:absolute;top:1.4rem;right:1.4rem; width:46px;height:46px; border:1px solid var(--bd2);background:transparent; color:var(--white);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:border-color .2s,transform .3s; } .mobile-menu-close:hover{border-color:var(--lime);transform:rotate(90deg)} .mobile-menu-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} .mobile-menu nav ul{list-style:none;text-align:center;display:flex;flex-direction:column;gap:1.5rem} .mobile-menu nav a{ font-family:"Bebas Neue",sans-serif; font-size:clamp(2.2rem,9vw,3.5rem); letter-spacing:.04em;color:var(--white); transition:color .2s;display:block; } .mobile-menu nav a:hover{color:var(--lime)} /* ═══════════ MOVIMENTO REDUZIDO (acessibilidade) ═══════════ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .hero-product img,.hero-glow{transform:none!important} #ambient-3d{display:none} .cf-card{transition:none} }