/* ============================================================ PB Tecnologia — design tokens ============================================================ */ :root { --bg: #03141e; --bg-footer: #020d14; --card: #0a2030; --surface: #0d2738; --border: #1c3850; --text: #f7f7f7; --text-secondary: #9fb4c6; --text-muted: #6f879b; --accent: #4460ef; --accent-dark: #293f99; --accent-light: #6982ff; --chip-bg: rgba(68, 96, 239, 0.12); --chip-border: rgba(68, 96, 239, 0.3); --chip-bg-onblue: rgba(247, 247, 247, 0.12); --chip-border-onblue: rgba(247, 247, 247, 0.3); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 100px; --container: 1440px; --pad-x: 120px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ Reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); /* overflow-x:hidden lives only on . Setting it here too makes only overflow-x non-visible on body while overflow-y stays visible — per the CSS overflow spec that silently flips overflow-y to auto, turning body into its own scroll container. Since body never actually scrolls internally, that breaks position:sticky for descendants (e.g. .pilares cards), which anchor to body's non-scrolling scrollport instead of the real page scroll. */ -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } button { font-family: inherit; } ul { list-style: none; margin: 0; padding: 0; } .section-inner { max-width: var(--container); margin: 0 auto; padding: 100px var(--pad-x, 20px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: var(--radius-pill); font-weight: 600; font-size: 16px; white-space: nowrap; transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); cursor: pointer; border: none; } .btn--primary { background: var(--accent); color: var(--text); } .btn--primary:hover { background: #5470f2; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(68, 96, 239, 0.35); } .btn--outline { background: transparent; border: 1.2px solid var(--border); color: var(--text); } .btn--outline:hover { background: rgba(247, 247, 247, 0.05); border-color: #2a4a68; } .btn--white { background: #f7f7f7; color: var(--bg); } .btn--white:hover { background: #ffffff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } /* ============================================================ Navbar ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 25px 120px; transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); } .navbar--hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* Fixed navbar is out of flow — reserve the same space so content doesn't jump underneath it (the bar hides/shows within this reserved strip). */ body { padding-top: var(--navbar-h, 96px); } /* The floating pill itself — a refined glass treatment: a light, mostly- transparent tint (not flat black) so it reads as frosted glass rather than a dark blob, a soft blur+saturate so color from the page bleeds through, a hairline border to define the edge, and a gentle shadow for lift. 128px radius / 21px 49px padding / 1200px cap match Figma. */ .navbar__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 21px 49px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 128px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: background-color 0.3s var(--ease); } .logo { display: flex; align-items: center; gap: 8px; } .logo__mark img { height: 22px; width: auto; aspect-ratio: 59.3906 / 22.0003; /* SVG has preserveAspectRatio="none" with no intrinsic size — must be pinned explicitly */ } .logo__wordmark img { height: 16px; width: auto; aspect-ratio: 84.2566 / 15.3881; } .footer .logo__mark img { height: 18px; } .footer .logo__wordmark img { height: 13px; } .navbar__right { display: flex; align-items: center; gap: 36px; } .nav-links { display: flex; align-items: center; gap: 34px; font-size: 15px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; } .nav-links a { transition: color 0.2s var(--ease); } .nav-links a:hover { color: var(--text); } .menu-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 46px; height: 46px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .menu-toggle span { width: 20px; height: 2px; border-radius: 2px; background: #cdd9e5; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: flex; flex-direction: column; gap: 4px; position: fixed; inset: 0; z-index: 90; /* below .navbar's z-index:100, so the sticky navbar (and its X button) stays on top */ padding: 20px 20px 24px; padding-top: calc(var(--navbar-h, 96px) + 12px); background: var(--bg); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; /* delay visibility:hidden until after fade-out completes */ transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s; } .mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s var(--ease), visibility 0s linear 0s; } .mobile-menu a { padding: 16px 6px; font-size: 17px; color: var(--text-secondary); border-bottom: 1px solid rgba(28, 56, 80, 0.6); } .mobile-menu a:last-child { border-bottom: none; margin-top: 12px; } .mobile-menu .btn { width: 100%; margin-top: 4px; } body.menu-open { overflow: hidden; } /* ============================================================ Ambient glow zone (Hero + Parceiros share two blurred blobs) ============================================================ */ .glow-zone { position: relative; /* no overflow:hidden here — the ambient glow blobs are intentionally offset above this box (negative top) so they bleed up behind the transparent floating navbar. Clipping them left a flat, glow-less strip at the very top that read as a solid dark bar. body already clips horizontal overflow, so this stays safe. */ } .glow { position: absolute; border-radius: 999px; pointer-events: none; z-index: 0; } .glow--1 { left: 147px; top: -369px; width: 1178px; height: 815px; background: var(--accent-light); opacity: 0.16; filter: blur(120px); } .glow--2 { left: 1123px; top: 233px; width: 577px; height: 578px; background: var(--accent-dark); opacity: 0.5; filter: blur(100px); } /* ============================================================ Hero ============================================================ */ .hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 64px 120px 0; gap: 20px; } .hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 900px; text-align: center; } /* Light sweep behind hero + navbar. Two layered gradients: — a sweeping linear beam (visible directional movement) — a static radial ambient base (so no corner is ever pitch-black when the beam is on the opposite side) Lives in .glow-zone (no overflow:hidden) so it extends above the hero behind the floating navbar. */ .hero__sheen { position: absolute; top: -160px; bottom: 0; left: -35%; right: -35%; background: linear-gradient(106deg, transparent 34%, rgba(105, 130, 255, 0.11) 50%, transparent 66%), radial-gradient(ellipse 100% 80% at 50% 35%, rgba(50, 70, 200, 0.06) 0%, transparent 100%); animation: heroSheen 18s ease-in-out infinite; mix-blend-mode: screen; pointer-events: none; z-index: 0; } @keyframes heroSheen { 0%, 100% { transform: translateX(-20%); } 50% { transform: translateX(20%); } } @media (prefers-reduced-motion: reduce) { .hero__sheen { animation: none; } } /* Particle network canvas — extends upward to fill behind navbar too */ .hero-canvas { position: absolute; top: calc(-1 * var(--navbar-h)); left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% + var(--navbar-h)); z-index: 0; pointer-events: none; display: block; } @media (max-width: 1024px) { .hero-canvas { display: none; } /* Sheen usa left:-35%;right:-35% que extrapola o viewport e expande o body no mobile — esconder previne o bug do header crescendo junto. */ .hero__sheen { display: none; } /* Blurs pesados no mobile: simplificar as blobs de glow para não travar */ .glow--1, .glow--2 { filter: blur(60px); } .contact-bg::before, .contact-bg::after { filter: blur(40px); } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: var(--radius-pill); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 12.5px; font-weight: 500; letter-spacing: 1px; color: rgba(255, 255, 255, 0.72); } .eyebrow__dot { width: 7px; height: 7px; } /* Energy pulse: a bright dot travels from the central logo outward to each orbit icon along the connector line. stroke-dasharray="18 600" — 18 px dot, 600 px gap (only one dot visible per line at a time). dashoffset 5→-450 moves the dot from the center of the SVG (x1/y1) all the way past the icon (x2/y2) for any line length ≤ 432 px. Negative delays pre-offset each line so all 7 fire in a staggered sequence from the first frame. */ .hero__title { font-size: 62px; font-weight: 600; line-height: 1.04; color: var(--text); } .hero__title .accent { color: var(--accent-light); } /* The cycling word keeps the project's normal font (Inter), which is proportional — "crédito"/"pessoas"/"oportunidades" render at different widths, so JS locks the box to the target word's real width before each fade cycle to stop the centered headline from shifting. white-space:nowrap is a second layer of insurance: without it, a word that's briefly a few px wider than the locked box (e.g. during a sub-pixel rounding frame) wraps onto a second line, growing the

by a full line-height and shoving every section below it down. With nowrap it just overflows horizontally for that one frame instead — invisible in practice, layout never moves. */ .hero__scramble { display: inline-block; text-align: left; white-space: nowrap; overflow: visible; } .hero__scramble-char { display: inline-block; white-space: pre; opacity: 0; filter: blur(12px); transition: opacity 0.35s var(--ease), filter 0.35s var(--ease); } .hero__scramble-char.is-visible { opacity: 1; filter: blur(0); } @media (prefers-reduced-motion: reduce) { .hero__scramble-char { transition: none; } } .hero__subtitle { max-width: 750px; font-size: 19px; line-height: 1.5; color: var(--text-secondary); } .hero__ctas { display: flex; align-items: center; gap: 16px; } /* Staggered entrance — badge, headline, subtitle and CTAs fade up one after another on load (0.1s start, 0.15s between each, matching the containerVariants/itemVariants timing from the reference component). Driven by JS adding .is-loaded (see js/script.js) rather than a pure on-paint CSS animation, so it's simple to confirm it actually fired. */ .hero__content > * { opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.62s var(--ease), transform 0.62s var(--ease); } .hero__content.is-loaded > * { opacity: 1; transform: translateY(0) scale(1); } .hero__content > *:nth-child(1) { transition-delay: 0.08s; } .hero__content > *:nth-child(2) { transition-delay: 0.24s; } .hero__content > *:nth-child(3) { transition-delay: 0.40s; } .hero__content > *:nth-child(4) { transition-delay: 0.55s; } /* ============================================================ Parceiros / marquee ============================================================ */ .parceiros { position: relative; z-index: 1; display: flex; justify-content: center; padding: 130px 120px 74px; } .parceiros__inner { display: flex; flex-direction: column; gap: 34px; width: 100%; max-width: 904px; } .eyebrow-label { font-size: 13px; font-weight: 600; letter-spacing: 2.5px; color: var(--text-muted); } .eyebrow-label--accent { color: var(--accent-light); font-size: 13.5px; letter-spacing: 0.81px; } .marquee { position: relative; width: 100%; overflow: hidden; height: 40px; /* Fade the real edges via an opacity mask instead of painting a solid-color overlay box — a painted overlay has to guess the background color behind it (wrong wherever the ambient glow tints it lighter), a mask never can. */ -webkit-mask-image: linear-gradient(to right, transparent, black 140px, black calc(100% - 140px), transparent); mask-image: linear-gradient(to right, transparent, black 140px, black calc(100% - 140px), transparent); } .marquee__track { display: flex; width: max-content; animation: marquee-scroll 28s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; align-items: flex-end; gap: 64px; padding-right: 64px; } /* Every logo SVG has preserveAspectRatio="none" and no intrinsic width/height, so the browser can't infer a real ratio for "width:auto" — aspect-ratio must be pinned explicitly per logo (from each file's own viewBox) or it distorts. Sizes here are deliberately smaller than Figma's own values — full-size they read as too heavy/loud for a logo strip; this keeps it clean. */ .marquee__logo { object-fit: contain; opacity: 0.85; } .marquee__logo--vip { height: 27px; width: auto; aspect-ratio: 91.6124 / 35.9998; } .marquee__logo--tem { height: 31px; width: auto; aspect-ratio: 86 / 45; } .marquee__logo--vex { height: 25px; width: auto; aspect-ratio: 90 / 36; } .marquee__logo--meuconsig { display: inline-flex; align-items: flex-end; gap: 8px; height: 31px; } .marquee__logo--meuconsig img { height: 31px; width: auto; aspect-ratio: 47.9237 / 45.3191; } .marquee__logo-text { font-size: 14px; font-weight: 600; line-height: 1.1; color: #d6d6d6; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-20%); } } /* ============================================================ Quem Somos ============================================================ */ .quem-somos__row { display: flex; gap: 72px; align-items: flex-start; } .quem-somos__text { display: flex; flex-direction: column; gap: 22px; width: 470px; flex-shrink: 0; } .section-title { font-size: 40px; font-weight: 600; line-height: 1.14; color: var(--text); text-align: center; } .section-title--left { font-size: 38px; line-height: 1.16; text-align: left; } .section-desc { font-size: 18px; line-height: 1.5; color: var(--text-secondary); text-align: center; } .section-desc--left { font-size: 17.5px; text-align: left; } .destaques { display: flex; flex-wrap: wrap; gap: 20px; flex: 1; } .destaque { display: flex; flex-direction: column; gap: 16px; width: calc(50% - 10px); min-height: 160px; /* was a fixed height — clipped text once the card got narrower than Figma's 319px reference and wrapped to an extra line */ padding: 26px 24px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); } .destaque:hover { transform: translateY(-4px); border-color: #2a4a68; } .destaque p { font-size: 16.5px; font-weight: 600; line-height: 1.38; color: var(--text); } .destaque--highlight { background: var(--accent); border-color: var(--accent); } .destaque--highlight:hover { border-color: #5470f2; } .chip { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--chip-bg); border: 1px solid var(--chip-border); flex-shrink: 0; } .chip img { width: 23px; height: 23px; } /* medal/pin/link/shield are true 23x23 in their SVG viewBox — safe to force-square */ .chip--onblue { background: var(--chip-bg-onblue); border-color: var(--chip-border-onblue); } .chip--lg { width: 58px; height: 58px; } .chip--lg img { max-width: 29px; max-height: 29px; width: auto; height: auto; } .icon-card { aspect-ratio: 23.55 / 19.3208; height: 24px; } .icon-robot-produto { aspect-ratio: 25.9667 / 28.3833; height: 29px; } /* ============================================================ Nossas Soluções ============================================================ */ .solucoes__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 48px; } .solucoes__robot { width: 16px; height: 16px; margin-bottom: 24px; opacity: 0.8; } .solucoes__head .section-desc { max-width: 720px; } .produtos { display: flex; gap: 20px; } .produto { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 36px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); } .produto:hover { transform: translateY(-4px); border-color: #2a4a68; } .produto h3 { font-size: 24px; font-weight: 600; color: var(--text); } .produto p { font-size: 16.5px; line-height: 1.65; color: var(--text-secondary); } .link-arrow { font-size: 15.5px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s var(--ease); } .link-arrow:hover { gap: 10px; } /* ============================================================ Nossa Diferença ============================================================ */ .diferenca__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 48px; } .pilares { display: flex; flex-wrap: wrap; gap: 20px; } .pilar { width: calc(50% - 10px); display: flex; flex-direction: column; gap: 14px; padding: 34px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); } .pilar:hover { transform: translateY(-4px); border-color: #2a4a68; } .pilar__num { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; color: var(--accent-light); } .pilar h3 { font-size: 22px; font-weight: 600; color: var(--text); } .pilar p { font-size: 16.5px; line-height: 1.62; color: var(--text-secondary); } /* ============================================================ CTA Final ============================================================ */ .cta-final .section-inner { padding-top: 100px; padding-bottom: 100px; display: flex; justify-content: center; } .cta-panel { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding: 72px 80px; border-radius: var(--radius-xl); background: linear-gradient(115deg, var(--accent), var(--accent-dark)); } .cta-panel h2 { font-size: 38px; font-weight: 600; line-height: 1.18; color: var(--text); } .cta-panel p { max-width: 640px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); } /* ============================================================ Footer ============================================================ */ .footer { background: var(--bg-footer); } .footer .section-inner { padding-top: 100px; padding-bottom: 100px; } .footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 40px; } .footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 420px; } .footer__brand p { font-size: 16px; line-height: 1.58; color: var(--text-secondary); } .footer__email { font-size: 15px; font-weight: 500; color: var(--accent-light); } .footer__col { display: flex; flex-direction: column; gap: 16px; } .footer__col-title { font-size: 13.5px; font-weight: 600; letter-spacing: 0.81px; color: var(--text-muted); } .footer__col a { font-size: 15.5px; color: var(--text-secondary); transition: color 0.2s var(--ease); } .footer__col a:hover { color: var(--text); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-muted); } /* ============================================================ Scroll-margin for fixed navbar — prevents anchor links from hiding section headers behind the navbar on click/scroll. ============================================================ */ #quem-somos, #solucoes, #parceiros, #cta-final { scroll-margin-top: var(--navbar-h, 96px); } /* ============================================================ Scroll-reveal ============================================================ */ .reveal { opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.62s var(--ease), transform 0.62s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal--from-left { transform: translateX(-64px) scale(0.98); transition-duration: 0.62s; } .reveal--from-right { transform: translateX(64px) scale(0.98); transition-duration: 0.62s; } /* ============================================================ Tablet (≤1024px) — matches Figma "Tablet · 768" frame ============================================================ */ @media (max-width: 1024px) { :root { --pad-x: 40px; } .navbar { padding: 20px 40px; } .navbar__inner { padding: 16px 32px; } .nav-links { display: none; } .menu-toggle { display: flex; } .hero { padding: 60px 40px 0; } .hero__title { font-size: 46px; line-height: 1.1; } .parceiros { padding: 100px 40px 60px; } .marquee { mask-image: linear-gradient(to right, transparent, black 90px, black calc(100% - 90px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 90px, black calc(100% - 90px), transparent); } .quem-somos__row { flex-direction: column; gap: 48px; } .quem-somos__text { width: 100%; } .section-title--left, .section-desc--left { text-align: center; } .quem-somos__text { align-items: center; text-align: center; } .destaques { width: 100%; } .destaque { width: calc(50% - 10px); } .produtos { flex-direction: column; } .pilar { width: 100%; } .cta-panel { padding: 56px 40px; } .cta-panel h2 { font-size: 32px; } .footer__top { flex-wrap: wrap; gap: 48px 24px; } .footer__brand { width: 100%; max-width: none; } /* Both of these used to extend WAY past any real tablet width (glow--2's right edge was at 1420px — over 650px past a 768px viewport). body's overflow-x:hidden masked it visually (no scrollbar), but it was still real overflow content, which is very likely what was dragging fixed- position elements' effective containing-block width out with it. */ .glow--1 { left: -30px; top: -262px; width: 700px; height: 760px; } .glow--2 { left: 480px; top: 120px; width: 280px; height: 560px; } /* Revert horizontal card animation — translateX clips at viewport edges when cards are full-width column */ .reveal--from-left, .reveal--from-right { transform: translateY(20px) scale(0.98); transition-duration: 0.62s; } } /* ============================================================ Mobile (≤640px) — matches Figma "Mobile · 390" frame ============================================================ */ @media (max-width: 640px) { .section-inner { padding: 64px 20px; } .navbar { padding: 12px 16px; } .navbar__inner { padding: 12px 20px; } .nav-cta { display: none; } .hero { padding: 55px 20px 0; } .hero__content { gap: 22px; } .hero__title { font-size: 28px; line-height: 1.12; } .hero__subtitle { font-size: 16px; } .hero__ctas { flex-direction: column; width: 100%; gap: 12px; } .hero__ctas .btn { width: 100%; } .parceiros { padding: 80px 20px 40px; } .marquee { mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent); } .section-title, .section-title--left { font-size: 28px; } .section-desc, .section-desc--left { font-size: 16px; } .destaque { width: 100%; } /* Stacking-cards scroll effect: each pilar sticks a little lower than the one before it, so as you scroll the next card slides up and piles on top, peeking the previous one's edge out from behind. */ .pilares { display: block; gap: 0; } .pilar { padding: 26px; position: sticky; margin-bottom: 16px; box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.28); } .pilares .pilar:nth-child(1) { top: calc(var(--navbar-h, 96px) + 8px); z-index: 1; } .pilares .pilar:nth-child(2) { top: calc(var(--navbar-h, 96px) + 36px); z-index: 2; } .pilares .pilar:nth-child(3) { top: calc(var(--navbar-h, 96px) + 64px); z-index: 3; } .pilares .pilar:nth-child(4) { top: calc(var(--navbar-h, 96px) + 92px); z-index: 4; } .cta-panel { padding: 44px 24px; border-radius: var(--radius-md); } .cta-panel h2 { font-size: 26px; } .cta-panel p { font-size: 16px; } .footer__top { flex-direction: column; gap: 40px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; } /* glow--1's right edge used to land at 578px on a 375px-wide screen — 203px of real horizontal overflow. Same class of bug as the tablet values above. */ .glow--1 { left: -60px; top: -145px; width: 460px; height: 500px; } .glow--2 { left: 70px; top: 260px; width: 300px; height: 300px; } /* Pilares use sticky-stacking scroll as visual effect — reveal animation conflicts with position:sticky by shifting the painted sticky position during the transition. Disable it so cards are always visible. */ .pilar.reveal { opacity: 1; transform: none; } } /* ============================================================ Fale Conosco page ============================================================ */ .contact-section { position: relative; min-height: 100vh; padding-bottom: 120px; /* sem overflow:hidden para o sheen poder sangrar acima como na hero */ } .contact-inner { padding-top: 64px; } /* Glow fixo cobre viewport inteiro, inclusive por trás do navbar */ .contact-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .contact-bg::before { content: ''; position: absolute; top: -20%; left: 15%; width: 80%; height: 70%; background: radial-gradient(ellipse, rgba(68, 96, 239, 0.28) 0%, transparent 65%); filter: blur(90px); } .contact-bg::after { content: ''; position: absolute; bottom: -10%; right: -10%; width: 55%; height: 60%; background: radial-gradient(ellipse, rgba(41, 63, 153, 0.22) 0%, transparent 65%); filter: blur(80px); } .section-inner.contact-inner { position: relative; z-index: 1; } /* Cabeçalho centralizado */ .contact-head { text-align: center; max-width: 680px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; gap: 20px; } .contact-head h1 { font-size: 56px; font-weight: 700; line-height: 1.06; letter-spacing: -0.5px; } .contact-head > p { font-size: 18px; color: var(--text-secondary); line-height: 1.65; } /* Card do formulário */ .form-card { max-width: 860px; margin: 0 auto; background: rgba(10, 32, 48, 0.7); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; display: flex; flex-direction: column; gap: 32px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .field { display: flex; flex-direction: column; gap: 10px; } .field label { font-size: 22px; font-weight: 600; color: var(--text); } .field input, .field textarea { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; transition: border-color 0.2s ease, background 0.2s ease; } .field input::placeholder, .field textarea::placeholder { color: var(--text-muted); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(68, 96, 239, 0.05); } .field textarea { min-height: 160px; resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .form-submit { width: 100%; padding: 18px 48px; font-size: 16px; } .form-feedback { font-size: 15px; border-radius: 10px; line-height: 1.5; } .form-feedback.is-success { color: #4ade80; background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.2); padding: 14px 20px; } .form-feedback.is-error { color: #f87171; background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.2); padding: 14px 20px; } @media (max-width: 1024px) { .contact-head h1 { font-size: 42px; } .form-card { padding: 36px; } } @media (max-width: 640px) { .contact-head h1 { font-size: 32px; } .contact-head > p { font-size: 16px; } .form-card { padding: 24px 20px; gap: 24px; } .form-row { grid-template-columns: 1fr; gap: 20px; } .field label { font-size: 18px; } .form-submit { align-self: stretch; text-align: center; } }