/* ============ RESET / BASE ============ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --ago-yellow: #EBB540; --ink: #0a0a0a; --ink-soft: #444; --ink-faint: #8a8a8a; --bg-light: #ffffff; --bg-dark: #050505; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace; } html { /* NUNCA usar overflow-x:hidden aqui — quebra position:sticky nos filhos (bug conhecido do Chrome quando a raiz ganha overflow) */ scroll-behavior: auto; width: 100%; } body { font-family: var(--font-sans); background: var(--bg-light); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; max-width: 100vw; position: relative; } img { max-width: 100%; } /* util */ .eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ago-yellow); margin-bottom: 26px; } .eyebrow-dark { color: rgba(5,5,5,0.65); } .big-title { font-size: clamp(28px, 3.6vw, 54px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; } .split-words .word { display: inline-block; } /* ============ HERO TV — fallback estático (sem vídeo) ============ */ .hero-tv { display: none; } /* só aparece com */ html.tv-fallback .hero, html.tv-fallback .hero-sticky { display: none; } html.tv-fallback .hero-tv { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3vw; height: 100vh; padding: 0 3vw; background: var(--bg-light); overflow: hidden; } html.tv-fallback .hero-tv .hero-brand { position: static; transform: none; flex: none; } .hero-tv-stage { position: relative; flex: none; width: min(58vh, 40vw); aspect-ratio: 1 / 1; } .hero-tv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .hero-tv-stage .co-stage { height: 100%; } .hero-tv-stage .co.co-static { opacity: 1; } /* callouts sempre visíveis, sem animação */ .hero-tv-stage .co-path { stroke-dashoffset: 0 !important; } .hero-final.hero-final-tv { position: static; opacity: 1; transform: none; flex: none; font-size: clamp(36px, 4.4vw, 84px); } /* telas de TV estreitas/verticais (raro, mas por segurança): empilha */ @media (max-width: 700px) { html.tv-fallback .hero-tv { flex-direction: column; height: auto; min-height: 100vh; padding: 5vh 4vw; gap: 3vh; } .hero-tv-stage { width: min(70vh, 88vw); } } /* ============ HERO ============ */ .hero { position: relative; height: 300vh; background: var(--bg-light); } .hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; } /* o container é um QUADRADO exato centralizado (mesma proporção do vídeo): assim o "cover" da lib nunca corta o enquadramento, em qualquer tela/DPR */ #scrolly-mask { position: absolute; inset: 0; margin: auto; height: 100%; aspect-ratio: 1 / 1; width: auto; max-width: 100%; } #scrolly-container { position: absolute; inset: 0; /* fade apenas nos 4 CANTOS (resíduo de vinheta) — as bordas centrais, onde o vidro do relógio encosta, ficam 100% intactas */ -webkit-mask-image: radial-gradient(circle 300px at 0% 0%, transparent 15%, black 92%), radial-gradient(circle 300px at 100% 0%, transparent 15%, black 92%), radial-gradient(circle 300px at 0% 100%, transparent 15%, black 92%), radial-gradient(circle 300px at 100% 100%, transparent 15%, black 92%); -webkit-mask-composite: source-in; mask-image: radial-gradient(circle 300px at 0% 0%, transparent 15%, black 92%), radial-gradient(circle 300px at 100% 0%, transparent 15%, black 92%), radial-gradient(circle 300px at 0% 100%, transparent 15%, black 92%), radial-gradient(circle 300px at 100% 100%, transparent 15%, black 92%); mask-composite: intersect; } #watch-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* container quadrado = enquadramento exato, nunca corta */ display: block; } .hero-ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; } /* marca — começa grande, centro-esquerda */ .hero-brand { position: absolute; top: 50%; left: 6vw; transform: translateY(-50%); /* alinhado ao centro, como a headline */ display: flex; flex-direction: column; align-items: center; gap: 12px; transform-origin: center center; } .hero-logo { width: clamp(190px, 21vw, 380px); height: auto; } .hero-slogan { font-size: clamp(12px, 0.95vw, 16px); line-height: 1.6; text-align: center; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } /* headline direita */ .hero-headline { position: absolute; top: 50%; right: 5vw; transform: translateY(-50%); font-size: clamp(44px, 5.6vw, 104px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; text-align: center; white-space: nowrap; } /* callouts */ .co { position: absolute; opacity: 0; } .co svg { display: block; overflow: visible; width: 100%; /* escala junto com o palco do vídeo */ height: auto; } .co-label { font-family: var(--font-mono); font-size: clamp(11px, 0.85vw, 14px); font-weight: 500; letter-spacing: 0.02em; color: var(--ink); position: absolute; white-space: nowrap; } /* palco dos callouts: mesma geometria do quadrado do vídeo no estado final (escala 1.15), para as linhas caírem nas peças em qualquer tela */ .co-stage { position: absolute; inset: 0; margin: auto; height: 82%; aspect-ratio: 1 / 1; width: auto; pointer-events: none; } .co-criacao { left: 5%; bottom: 24%; width: 21%; } .co-label-criacao { left: 0; top: 100%; margin-top: 6px; } .co-tecnologia { left: 30%; top: 21%; width: 21%; } .co-label-tecnologia { right: 0; bottom: 100%; margin-bottom: 6px; } /* largura acompanha o viewBox maior (620) para a linha manter a mesma espessura e escala dos outros callouts; como está ancorado à direita, cresce para a esquerda */ .co-consultoria { right: 4%; top: 12%; width: 54.3%; } .co-label-consultoria { right: 0; bottom: 100%; margin-bottom: 6px; } /* headline final */ .hero-final { position: absolute; right: 5vw; top: 50%; font-size: clamp(44px, 5.6vw, 104px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; text-align: center; color: var(--ink); opacity: 0; } /* hint */ .scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .scroll-hint-arrow { font-size: 15px; animation: bob 1.8s ease-in-out infinite; } /* aviso "role para contato" sobre o vídeo do rodapé — herda o estilo do hint do hero; começa invisível e o JS o revela quando o vídeo da moça chega ao fim */ .scroll-hint-footer { bottom: 34px; z-index: 4; opacity: 0; color: rgba(255, 255, 255, 0.6); /* discreto sobre o fundo escuro, como o hint do hero */ pointer-events: none; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ============ BOUNCE EDGE ============ */ .bounce-edge { position: absolute; top: -219px; left: 0; width: 100%; height: 220px; display: block; overflow: visible; pointer-events: none; } /* ============ ATUAÇÃO ============ */ .atuacao { position: relative; background: var(--bg-dark); color: #fff; padding: 170px 10vw 190px; } .atuacao-inner { max-width: 1060px; margin: 0 auto; text-align: center; } .section-sub { margin-top: 24px; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.65; color: #b5b5b5; max-width: 560px; margin-left: auto; margin-right: auto; } .cards { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; } .card { background: #0e0e0e; border: 1px solid #1d1d1d; border-radius: 22px; padding: 36px 30px 32px; position: relative; /* sem transition em transform: conflita com a animação de entrada do gsap */ transition: border-color 0.35s ease, box-shadow 0.35s ease; } .card:hover { border-color: var(--ago-yellow); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); } .card-icon { width: 42px; height: 42px; color: var(--ago-yellow); margin-bottom: 26px; } .card-icon svg { width: 100%; height: 100%; } .card-num { position: absolute; top: 32px; right: 30px; font-family: var(--font-mono); font-size: 13px; color: #3a3a3a; } .card h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; } .card ul { list-style: none; } .card li { font-size: 14px; line-height: 1.5; color: #c9c9c9; padding: 8px 0; border-bottom: 1px solid #1a1a1a; } .card li:last-child { border-bottom: 0; } .card-note { margin-top: 18px; font-size: 13px; line-height: 1.55; color: #8a8a8a; font-style: italic; } /* ============ PROCESSO ============ */ .processo { background: var(--bg-dark); color: #fff; padding: 40px 10vw 190px; overflow-x: hidden; /* as fases entram deslocadas em x — sem isso, vazam a largura da página */ } .processo-inner { max-width: 1000px; margin: 0 auto; text-align: center; } .fases { margin-top: 76px; display: flex; align-items: stretch; justify-content: center; gap: 0; } .fase { flex: 1; max-width: 300px; padding: 0 28px; display: flex; flex-direction: column; align-items: center; } .fase-sep { width: 1px; background: linear-gradient(to bottom, transparent, #2a2a2a, transparent); } .fase-icon { width: 38px; height: 38px; color: var(--ago-yellow); margin-bottom: 22px; } .fase-icon svg { width: 100%; height: 100%; } .fase-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .fase h3 { font-size: clamp(16px, 1.25vw, 19px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; } .processo-caminho { margin: 90px auto 0; max-width: 680px; font-size: clamp(15px, 1.15vw, 18.5px); line-height: 1.75; color: #b5b5b5; } /* ============ ATENDEPRÓ ============ */ .atendepro { position: relative; background: var(--ago-yellow); color: var(--bg-dark); padding: 160px 10vw; text-align: center; } .atendepro-inner { max-width: 640px; margin: 0 auto; } .ap-icon { width: 50px; height: 50px; margin: 0 auto 30px; color: var(--bg-dark); } .ap-icon svg { width: 100%; height: 100%; } .ap-sub { margin-top: 24px; font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.65; font-weight: 500; } .btn-dark, .btn-yellow { display: inline-block; margin-top: 44px; padding: 17px 38px; border-radius: 100px; font-size: 16px; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; transition: transform 0.3s ease, box-shadow 0.3s ease; pointer-events: auto; } .btn-dark { background: var(--bg-dark); color: #fff; } .btn-yellow { background: var(--ago-yellow); color: var(--bg-dark); } .btn-dark:hover, .btn-yellow:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.22); } /* ============ QUEM SOMOS ============ */ .quem-somos { position: relative; background: var(--bg-light); color: var(--ink); padding: 180px 10vw; } .qs-inner { max-width: 940px; margin: 0 auto; } .qs-def { font-size: clamp(15px, 1.2vw, 19px); margin-bottom: 26px; color: var(--ink-soft); } .qs-def em { font-weight: 700; font-style: italic; color: var(--ink); } .qs-ipa { font-family: var(--font-mono); font-size: 0.85em; color: var(--ink-faint); } .qs-cols { margin-top: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .qs-cols p { font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.8; color: var(--ink-soft); } /* ============ QUOTE ============ */ .quote { position: relative; background: var(--bg-dark); color: #fff; padding: 180px 10vw; text-align: center; } .quote blockquote { max-width: 860px; margin: 0 auto; } .quote-text { font-size: clamp(22px, 2.6vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; } .quote footer { margin-top: 42px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-faint); } .quote footer span { color: var(--ago-yellow); font-size: 12px; } .quote-author { white-space: nowrap; display: inline-block; } /* não quebra nome no meio */ /* ============ FAQ ============ */ .faq { position: relative; background: var(--bg-light); padding: 180px 10vw; overflow-x: hidden; /* itens entram deslocados em x — mesma lógica do .processo */ } .faq-inner { max-width: 760px; margin: 0 auto; } .faq-list { margin-top: 60px; } .faq-item { border-bottom: 1px solid #e4e4e4; } .faq-item summary { list-style: none; cursor: pointer; padding: 24px 46px 24px 0; font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; letter-spacing: -0.015em; position: relative; transition: color 0.25s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--ago-yellow); } .faq-plus { position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); } .faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--ink); transition: transform 0.3s ease; } .faq-plus::before { left: 0; top: 7px; width: 16px; height: 2px; } .faq-plus::after { left: 7px; top: 0; width: 2px; height: 16px; } .faq-item[open] .faq-plus::after { transform: rotate(90deg); } .faq-item p { padding: 0 60px 26px 0; font-size: 15px; line-height: 1.75; color: var(--ink-soft); } /* ============ FOOTER ============ */ .footer { position: relative; background: var(--bg-dark); color: #fff; padding: 0 0 60px; } /* ---- scrub da moça (mesmo mecanismo do relógio) ---- */ .footer-scrub { position: relative; height: 250vh; } .footer-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; } .moca-wrap { position: absolute; right: 17vw; top: 50%; transform: translateY(-50%); height: 76vh; aspect-ratio: 1252 / 1652; } #moca-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* nunca corta o enquadramento */ display: block; } .moca-tv-img { display: none; } /* só aparece com */ html.tv-fallback #moca-video { display: none; } html.tv-fallback .moca-tv-img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .footer-ui { position: relative; z-index: 5; padding-left: 10vw; max-width: 46vw; text-align: left; } .footer-title { color: #fff; } .footer-inner { padding: 0 10vw; text-align: center; } .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: left; border-top: 1px solid #1d1d1d; padding-top: 64px; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-logo { width: 175px; } .footer-col-logo { justify-content: center; /* logo centralizado na altura das outras colunas */ } .footer-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ago-yellow); margin-bottom: 8px; } .footer-col a, .footer-col p { color: #d6d6d6; text-decoration: none; font-size: 15.5px; line-height: 1.6; transition: color 0.25s ease; } .footer-col a:hover { color: var(--ago-yellow); } .footer-copy { margin-top: 80px; font-family: var(--font-mono); font-size: 12px; color: #555; } @media (max-width: 900px) { .footer-scrub { height: 220vh; } .moca-wrap { right: auto; left: 50%; top: 8vh; transform: translateX(-50%); height: 56vh; } .footer-ui { max-width: 100%; padding: 66vh 8vw 0; text-align: center; } } /* ============ REVEAL (estado inicial p/ GSAP) ============ */ .reveal { opacity: 0; transform: translateY(44px); } .no-js .reveal { opacity: 1; transform: none; } /* ============ RESPONSIVO ============ */ @media (max-width: 900px) { .hero { height: 250vh; } .hero-brand { top: 7vh; left: 50%; transform: translateX(-50%); } .hero-logo { width: 140px; } .hero-slogan { font-size: 13px; } .hero-headline { top: auto; bottom: 9vh; right: 50%; transform: translateX(50%); font-size: 13vw; } .co { display: none !important; } /* fica cortada pelo relógio/headline no mobile — remover só aqui */ .scroll-hint { display: none; } /* relógio um pouco menor no mobile (só aqui — no desktop o gsap controla a escala) */ #scrolly-mask { height: 84%; } /* mesma lógica de ancoragem do "O futuro chegou": centralizado embaixo, sem sobrepor o relógio */ .hero-final { top: auto; bottom: 9vh; right: 50%; transform: translateX(50%); font-size: 16vw; } .cards { grid-template-columns: 1fr; } .fases { flex-direction: column; gap: 60px; } .fase { max-width: none; } .fase-sep { display: none; } .qs-cols { grid-template-columns: 1fr; gap: 32px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-col { align-items: center; } }