/* =================================================================== INSTITUTO Q9-S — DESIGN SYSTEM Ciência Empírica · Soberania de Dados · Vida Sutil Lei de design: preto absoluto · mídia com blend (sem box) · vidro · float · glow =================================================================== */ :root{ --black:#000000; --black-2:#050607; --ink:#0a0d0e; --neon:#48F7A6; --neon-soft:#7CFFC4; --cyan:#39E0FF; --gold-1:#F7E8B0; --gold-2:#E7C25A; --gold-3:#B8860B; --gold-4:#FBF1C7; --gold-grad:linear-gradient(135deg,var(--gold-4) 0%,var(--gold-2) 40%,var(--gold-3) 64%,var(--gold-1) 100%); --white:#F4F7F6; --grey:#9AA6A2; --grey-dim:#586460; --maxw:1200px; --ease:cubic-bezier(.19,1,.22,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;background:var(--black)} body{background:transparent;color:var(--white);font-family:'Inter',system-ui,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} /* camada "vácuo vivo": fundo full-page atrás de TODO o conteúdo, de ponta a ponta. Padrão correto: fundo preto no , transparente, canvas fixo em z-index:-1. */ #q9space{position:fixed;inset:0;z-index:-1;pointer-events:none} img,video{max-width:100%;display:block} /* Vídeos são decorativos (autoplay/mudo/loop) — nunca mostrar os controles nativos do navegador */ video::-webkit-media-controls, video::-webkit-media-controls-enclosure, video::-webkit-media-controls-panel, video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none!important;opacity:0!important;pointer-events:none!important} video{pointer-events:none} /* Proteção contra download casual — o site só serve versões web; as masters em alta ficam fora do ar. Bloqueia arrastar-pra-salvar e o "segurar o dedo" (iOS). Print continua possível; download casual não. */ img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none} a{color:inherit;text-decoration:none} .mono{font-family:'Roboto Mono',monospace} .dim{color:var(--grey-dim)} .center{text-align:center} .gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 10px rgba(231,194,90,.16))} /* Samsung Internet (navegador padrão da Samsung) washa o background-clip:text — o dourado apaga/avermelha. Detectado via JS (classe .samsung no ) → dourado SÓLIDO limpo só nesse navegador. Todos os outros veem o metálico. */ html.samsung .gold,html.samsung .status-modal__title,html.samsung .sent-modal__title{ background:none;-webkit-text-fill-color:#E7C25A;color:#E7C25A;filter:none;text-shadow:0 0 12px rgba(231,194,90,.22)} .neon{color:var(--neon);text-shadow:0 0 14px rgba(72,247,166,.32),0 0 34px rgba(57,224,255,.12)} .hi{color:var(--gold-1);font-weight:500} /* ---- mídia: TODA imagem/vídeo funde no preto (sem box, flutua) ---- */ .blend,.hero__mandala video,.hero__wordmark,.foot__brand video, .bravo__media video,.charlie__banner video,.z-media video,.golf__heart video,.nav__brand img{ mix-blend-mode:screen; } /* ---- acabamento cinematográfico ---- */ .grain{position:fixed;inset:0;z-index:3;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='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 100% at 50% 42%,transparent 55%,rgba(0,0,0,.55) 100%)} /* ---- OVERLAP entre blocos: cada seção sobe e sobrepõe a anterior (eixo Z) ---- */ main > section{position:relative;background:var(--black);z-index:1} main > section + section{ margin-top:-26px; /* cantos 100% retos (sem border-radius) — mais chique/tech */ box-shadow:0 -46px 90px -18px rgba(0,0,0,.96); } main > section + section::before{ content:"";position:absolute;top:0;left:8%;right:8%;height:1px; background:linear-gradient(90deg,transparent,rgba(72,247,166,.16) 35%,rgba(231,194,90,.14) 65%,transparent); opacity:.55; } /* ---- tipografia de seção ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)} .wrap.narrow{max-width:820px} .h-sec{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:.02em} .h-min{font-family:'Cinzel',serif;font-weight:600;font-size:1.15rem;letter-spacing:.02em;color:var(--white);margin-bottom:14px} .subhead{font-family:'Roboto Mono',monospace;font-size:clamp(.66rem,1.3vw,.84rem);letter-spacing:.32em;margin-top:16px} .eyebrow{font-family:'Roboto Mono',monospace;font-size:.72rem;letter-spacing:.3em;margin-bottom:14px} .lead{color:var(--grey);font-size:clamp(.95rem,1.5vw,1.08rem);line-height:1.8;max-width:760px;margin:22px auto 0} section p{color:var(--grey);font-size:1rem;line-height:1.85;margin-top:16px} /* ===== A Nova Categoria — Category Design (ponte entre o problema e a tecnologia) ===== */ /* fundo: miolo preto (texto legível) + laterais transparentes revelando as micropartículas do #q9space */ /* seção transparente (revela as partículas) + respiro de baixo MAIOR, vazado, que emenda na galáxia do satélite */ .category{position:relative;padding:16vh 0 22vh;overflow:hidden;background:transparent} @media(max-width:820px){.category{background:linear-gradient(180deg,var(--black) 84%,transparent 100%);padding:14vh 0 17vh}} /* backdrop preto SÓ atrás do texto — some pras laterais e some pra baixo (respiro vazado) */ .category__backdrop{position:absolute;inset:0;z-index:1;background:var(--black);pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 42% 64% at 50% 32%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 42% 64% at 50% 32%,#000 72%,transparent 100%)} @media(max-width:820px){.category__backdrop{display:none}} /* grade dourada de "arquitetura" — quase imperceptível, marca d'água só no miolo */ .category__grid{position:absolute;inset:0;z-index:2;background-image:linear-gradient(rgba(231,194,90,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(231,194,90,.03) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 52% 50% at 50% 30%,#000,transparent 72%);mask-image:radial-gradient(ellipse 52% 50% at 50% 30%,#000,transparent 72%);pointer-events:none} .category .wrap{position:relative;z-index:3} /* wordmark INSTITUTO Q9-S no topo da seção — reforço de marca + preenche o vácuo (principalmente no mobile) */ .category__brand{display:block;width:min(360px,62vw);height:auto;margin:0 auto 30px} @media(max-width:820px){.category__brand{width:min(340px,76vw);margin-bottom:24px}} /* camada extra de partículas SÓ desta seção (densidade dobrada, brilho 0.65) — mascarada só nas laterais */ .category__field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 12%,transparent 20%,transparent 80%,#000 88%,#000 100%),linear-gradient(180deg,transparent 58%,#000 80%);mask-image:linear-gradient(90deg,#000 0%,#000 12%,transparent 20%,transparent 80%,#000 88%,#000 100%),linear-gradient(180deg,transparent 58%,#000 80%)} @media(max-width:820px){.category__field{display:none}} .category__body{max-width:800px;margin:34px auto 0} .category__body p{color:var(--white);font-size:clamp(1.04rem,1.5vw,1.22rem);line-height:1.95;letter-spacing:.005em;margin:0 0 15px;opacity:.9;text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto} .category__body p:last-child{margin-bottom:0} @media(max-width:820px){.category__body p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}} .category__sig{width:-webkit-fit-content;width:fit-content;max-width:760px;margin:42px auto 0;padding:16px 32px;border:1px solid rgba(72,247,166,.4);border-radius:2px;text-align:center;font-family:'Cinzel',serif;font-style:italic;font-size:clamp(1.02rem,1.55vw,1.28rem);line-height:1.7;color:var(--neon);text-shadow:0 0 16px rgba(72,247,166,.28),0 0 40px rgba(57,224,255,.12);box-shadow:0 0 26px rgba(72,247,166,.06),inset 0 0 22px rgba(72,247,166,.03)} /* costura limpa entre a Categoria (respiro vazado) e a Soberania Orbital (galáxia) — sem overlap/sombra/linha */ .category + .charlie{margin-top:0;box-shadow:none} .category + .charlie::before{display:none} section p .hi{} /* ===================== NAVBAR ===================== */ .nav{position:fixed;top:0;left:0;width:100%;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,5vw,56px);transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s;border-bottom:1px solid transparent} .nav.scrolled{background:rgba(0,0,0,.6);backdrop-filter:blur(16px) saturate(1.2);padding-top:12px;padding-bottom:12px;border-bottom:1px solid rgba(231,194,90,.10)} .nav__brand img{height:70px;width:auto} .nav__links{display:flex;gap:34px} .nav__links a{font-size:.8rem;letter-spacing:.05em;color:var(--grey);position:relative;transition:color .3s} .nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--neon);box-shadow:0 0 8px var(--neon);transition:width .35s var(--ease)} .nav__links a:hover{color:var(--white)} .nav__links a:hover::after{width:100%} .nav__right{display:flex;align-items:center;gap:22px} .lang{display:flex;align-items:center;gap:8px;font-family:'Roboto Mono',monospace;font-size:.74rem;letter-spacing:.08em} .lang__opt{background:none;border:none;color:var(--grey);cursor:pointer;font:inherit;transition:color .3s} .lang__opt.is-active{color:var(--gold-1)} .lang__sep{color:var(--grey-dim)} .nav__cta{font-family:'Roboto Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:10px 20px;border:1px solid rgba(184,134,11,.55);border-radius:1px;color:var(--gold-1);transition:.4s var(--ease);white-space:nowrap} .nav__cta:hover{box-shadow:0 0 22px rgba(231,194,90,.35),inset 0 0 20px rgba(231,194,90,.06);border-color:var(--gold-2)} @media(max-width:860px){.nav__links{display:none}} .layer-tag{position:fixed;right:clamp(16px,4vw,42px);bottom:32px;z-index:55;font-family:'Roboto Mono',monospace;font-size:.72rem;letter-spacing:.16em;color:var(--grey);display:flex;align-items:center;gap:9px;opacity:0;transition:opacity .6s,color .6s} .layer-tag.show{opacity:.8} .layer-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)} /* ===================== ALPHA — HERO ===================== */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:130px 22px 90px;overflow:hidden} .hero__inner{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;max-width:940px} .hero__mandala{margin-bottom:-6px} .hero__mandala video{width:min(88vw,715px);height:auto;filter:contrast(1.05) saturate(1.12) drop-shadow(0 0 60px rgba(72,247,166,.12))} .hero__wordmark{width:min(80vw,558px);height:auto;margin-top:6px;filter:drop-shadow(0 0 26px rgba(231,194,90,.14))} .hero__subtitle{font-family:'Roboto Mono',monospace;font-weight:400;font-size:clamp(.64rem,1.4vw,.92rem);letter-spacing:.4em;margin-top:30px;padding-left:.4em} .hero__tagline{color:var(--white);font-size:clamp(1.05rem,2.3vw,1.5rem);font-weight:400;margin-top:24px} .hero__lead{color:var(--grey);font-size:clamp(.92rem,1.5vw,1.05rem);max-width:640px;margin:28px auto 0;line-height:1.78} .scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:4} .scroll-cue span{display:block;width:22px;height:36px;border:1px solid var(--grey-dim);border-radius:14px;position:relative} .scroll-cue span::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;background:var(--neon);animation:scrolldot 1.8s var(--ease) infinite} @keyframes scrolldot{0%{opacity:0;top:7px}40%{opacity:1}80%{opacity:0;top:20px}100%{opacity:0}} .has-gsap [data-anim]{opacity:0;transform:translateY(26px)} .has-gsap [data-reveal]{opacity:0} /* ===================== BRAVO (mosaico de 4 blocos) ===================== */ .bravo{padding:12vh 0} .bravo__mosaic{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,72px);row-gap:clamp(26px,3.5vw,48px);align-items:start} .bravo__video{grid-column:1;grid-row:1} .bravo__video video{width:100%;aspect-ratio:1/1;object-fit:cover} .bravo__lead{grid-column:2;grid-row:1} .bravo__lead .eyebrow{margin-bottom:14px} .bravo__lead p{margin-top:22px;font-size:1.02rem} .bravo__b2{grid-column:1;grid-row:2} .bravo__b3{grid-column:2;grid-row:2} .bravo__b2 p,.bravo__b3 p{margin-top:0;font-size:1rem} @media(max-width:820px){ .bravo__mosaic{grid-template-columns:1fr} .bravo__video,.bravo__lead,.bravo__b2,.bravo__b3{grid-column:1;grid-row:auto} } /* ===================== CHARLIE (banner) ===================== */ .charlie{padding-bottom:12vh} /* banner do satélite: topo inteiro (satélite visível), corte cirúrgico só na base (fim do NDVI). Proporção do guia enviado (2522x1126), ancorada no topo. */ .charlie__banner{width:100%;aspect-ratio:1280/615;overflow:hidden;display:block;margin-bottom:8vh} .charlie__banner video{width:100%;height:100%;object-fit:cover;object-position:center top;filter:contrast(1.05) saturate(1.1)} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);margin-top:40px} /* Vídeo orbital multissatélite — full-width, de fora a fora */ .charlie__orbital{width:100%;margin-top:9vh} .charlie__orbital video{width:100%;display:block} @media(max-width:760px){.two-col{grid-template-columns:1fr;gap:34px}} /* ===================== DELTA (constelação) ===================== */ .delta{padding:12vh 0} .delta__constellation{display:grid;grid-template-columns:1fr 1.15fr 1fr;grid-template-rows:auto auto;gap:clamp(18px,3vw,40px);margin-top:56px;align-items:center} .delta__core{grid-column:2;grid-row:1 / span 2;position:relative;min-height:280px;display:flex;align-items:center;justify-content:center;border-radius:3px} .core__glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(72,247,166,.12),rgba(57,224,255,.04) 45%,transparent 70%);animation:pulse 5s var(--ease) infinite} @keyframes pulse{0%,100%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}} .card{position:relative;padding:26px 24px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border:1px solid rgba(255,255,255,.06);border-radius:2px;transition:.5s var(--ease)} .card::before{content:"";position:absolute;left:0;top:22px;width:2px;height:26px;background:var(--gold-grad);opacity:.7} .card.is-active{border-color:rgba(72,247,166,.32);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 30px rgba(72,247,166,.06)} .card__k{display:block;font-family:'Cinzel',serif;font-size:1rem;margin-bottom:10px;letter-spacing:.02em} .card p{margin-top:0;font-size:.92rem;line-height:1.7} @media(max-width:820px){.delta__constellation{grid-template-columns:1fr}.delta__core{grid-column:1;grid-row:auto;min-height:200px}} /* ===================== DEEPTECH ===================== */ .deeptech{padding:12vh 0;background:radial-gradient(70% 60% at 50% 0%,rgba(57,224,255,.03),transparent 60%)} .pane{padding:30px;border:1px solid rgba(255,255,255,.06);border-radius:2px;background:linear-gradient(180deg,rgba(72,247,166,.02),transparent);transition:.5s var(--ease)} .pane.is-active{border-color:rgba(231,194,90,.25);box-shadow:0 0 40px rgba(0,0,0,.5)} .pane p{margin-top:12px;font-size:.95rem} /* ===================== ECHO (Z-pattern) ===================== */ .echo{padding:12vh 0} .z-row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;margin-bottom:12vh} .z-row--rev{grid-template-columns:1fr 1.1fr} .z-row--rev .z-media{order:2} .z-media video{width:100%;filter:drop-shadow(0 0 50px rgba(72,247,166,.12))} .z-text .eyebrow{margin-bottom:12px} @media(max-width:820px){.z-row,.z-row--rev{grid-template-columns:1fr}.z-row--rev .z-media{order:0}} /* ===================== FOXTROT (Gêmeo Digital) ===================== */ .foxtrot{padding:12vh 0} .ui-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,26px);margin-top:56px} .pane__img{width:100%;mix-blend-mode:screen;margin-bottom:18px} @media(max-width:980px){.ui-grid{grid-template-columns:repeat(2,1fr)}} .ui-shot{aspect-ratio:16/10;border-radius:3px;display:flex;align-items:center;justify-content:center;position:relative;transition:.5s var(--ease)} .highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(64px,8vh,92px)} .highlights h4{font-family:'Cinzel',serif;font-weight:600;font-size:1.02rem;margin-bottom:8px;text-align:center} .highlights p{margin-top:0;font-size:.9rem;line-height:1.7} .temporal{margin-top:6vh;padding-top:6vh;border-top:1px solid rgba(255,255,255,.05)} .metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px} .metric{text-align:center;padding:18px 10px;border-left:1px solid rgba(231,194,90,.14)} .metric__n{display:block;font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1} .metric__l{display:block;margin-top:8px;font-size:.66rem;letter-spacing:.1em;color:var(--grey)} @media(max-width:820px){.ui-grid,.highlights{grid-template-columns:1fr}.metric-row{grid-template-columns:1fr 1fr}} /* ===================== GOLF (Valor Vital) ===================== */ .golf{padding:12vh 0 14vh;position:relative} .golf__heart{display:flex;justify-content:center;margin-bottom:6vh} .golf__heart video{width:min(70vw,420px);filter:drop-shadow(0 0 70px rgba(231,194,90,.16))} .golf .wrap.narrow p{font-size:1.06rem} /* Carrossel .com */ .carousel{position:relative;max-width:1100px;margin:12vh auto 0;padding:0 60px;overflow:hidden} .carousel__track{display:flex;gap:26px;transition:transform .7s var(--ease)} .slide{flex:0 0 100%;aspect-ratio:16/9;border-radius:3px;display:flex;align-items:center;justify-content:center} @media(min-width:900px){.slide{flex:0 0 calc(50% - 13px)}} /* Navegação do carrossel — embaixo, centralizada, fora da arte: ‹ ▬▬▬▬▬▬ › */ .car-nav{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:28px} .car-arrow{background:none;border:none;color:var(--gold-2);font-size:2rem;line-height:1;cursor:pointer;opacity:.6;transition:.3s;font-family:'Inter';padding:0 4px} .car-arrow:hover{opacity:1;text-shadow:0 0 16px rgba(231,194,90,.55)} .car-dots{display:flex;align-items:center;gap:10px} .car-dots i{display:block;width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.16);cursor:pointer;transition:.4s var(--ease)} .car-dots i.active{background:var(--gold-grad);box-shadow:0 0 10px rgba(231,194,90,.5);width:30px} /* Zona Paper */ /* scroll-margin: o menu e fixo, entao a ancora #paper para abaixo dele em vez de encostar no topo e ficar escondida atras da barra */ .paper-zone{text-align:center;margin-top:14vh;scroll-margin-top:112px} .paper-support{color:var(--grey);max-width:640px;margin:0 auto} .paper-study{margin-top:26px;color:var(--gold-1);font-size:.94rem;line-height:1.65;letter-spacing:.01em} /* GRID, nao flex: em flex a caixa cresce com o texto, e "PORTUGUÊS" e mais comprido que "INGLÊS" — dai um botao maior que o outro. Em grid as duas colunas sao 1fr cada, iguais por definicao, seja qual for a palavra dentro. */ .paper-cta{display:grid;grid-template-columns:1fr;justify-items:center;gap:18px;margin-top:34px} .paper-cta .btn-gold{width:100%;max-width:360px} .paper-cta .btn-ghost{font-size:.68rem;letter-spacing:.06em;margin-top:6px;cursor:default} @media(min-width:760px){ .paper-cta{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; max-width:760px;margin-left:auto;margin-right:auto} .paper-cta .btn-gold{max-width:none} .paper-cta .btn-ghost{grid-column:1 / -1;text-align:center;margin-top:14px} } /* background/cursor explicitos: