/* ============================================================ 🚹 NUCLEAR — NEUTRALIZA WRAPPERS DO AVIA NO TEMPLATE MUDE ============================================================ Mesmo que [av_textblock], [av_section] ou similar tenham vindo no conteĂșdo da pĂĄgina, este reset garante que o layout flua normalmente, sem padding/background/posicionamento indesejado e SEM

parasita envolvendo as seçÔes. ============================================================ */ body.mude-fullwidth .av_textblock_section, body.mude-fullwidth .avia_textblock, body.mude-fullwidth .av_section, body.mude-fullwidth .flex_column, body.mude-fullwidth .av_one_full, body.mude-fullwidth .av_one_half, body.mude-fullwidth section.av_textblock_section, body.mude-fullwidth div.avia_textblock { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; float: none !important; clear: both !important; } /* Faz o

que o wpautop injeta virar transparente no layout (display:contents remove a caixa do

mas mantĂ©m o conteĂșdo) */ body.mude-fullwidth .avia_textblock > p, body.mude-fullwidth .av_textblock_section > p, body.mude-fullwidth .mude-main > p { display: contents !important; } /*
entre seçÔes nĂŁo deve ocupar espaço */ body.mude-fullwidth .avia_textblock > br, body.mude-fullwidth .av_textblock_section > br, body.mude-fullwidth .mude-main > br { display: none !important; } /* ============================================================ ENFOLD OVERRIDE — sĂł o ESSENCIAL pra neutralizar conflitos. Aplicado apenas no template "Mude — PĂĄgina Fullwidth" (body.mude-fullwidth). ============================================================ */ /* Reset do Enfold no template Mude */ body.mude-fullwidth { margin: 0 !important; padding: 0 !important; background: var(--off-white) !important; overflow-x: hidden; } /* Esconde tudo do Enfold (header, footer, sidebar, breadcrumbs) */ body.mude-fullwidth #header, body.mude-fullwidth #top #header, body.mude-fullwidth .header_bg, body.mude-fullwidth #footer, body.mude-fullwidth #socket, body.mude-fullwidth .sidebar, body.mude-fullwidth #breadcrumbs, body.mude-fullwidth .breadcrumb, body.mude-fullwidth .breadcrumb-trail, body.mude-fullwidth .title_container, body.mude-fullwidth .stretch_full.title_container, body.mude-fullwidth .entry-title, body.mude-fullwidth .post-title { display: none !important; } /* Container do Enfold ocupa 100% no template Mude */ body.mude-fullwidth #wrap_all, body.mude-fullwidth #main, body.mude-fullwidth .container_wrap, body.mude-fullwidth .container, body.mude-fullwidth .entry-content-wrapper, body.mude-fullwidth .template-page, body.mude-fullwidth main.template-page { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } /* Tipografia do Enfold NÃO sobrescreve a nossa */ body.mude-fullwidth h1, body.mude-fullwidth h2, body.mude-fullwidth h3, body.mude-fullwidth h4, body.mude-fullwidth h5, body.mude-fullwidth h6, body.mude-fullwidth p, body.mude-fullwidth span, body.mude-fullwidth a, body.mude-fullwidth li { text-transform: none !important; font-family: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; } /* Reset de listas (Enfold adiciona estilo) */ body.mude-fullwidth ul, body.mude-fullwidth ol, body.mude-fullwidth li { list-style: none !important; margin: 0; padding: 0; } /* Anchors sem underline forçado */ body.mude-fullwidth a { text-decoration: none !important; } /* mude-main full width */ body.mude-fullwidth .mude-main { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* ============================================ MUDE. — site novo · paleta amarelo + rosa ============================================ */ :root { --yellow: #FED600; --yellow-deep: #E8C200; --pink: #ED5AB4; --pink-deep: #D63F9C; --black: #0A0A0A; --off-white: #FAFAFA; --gray: #888; --gray-light: #E5E5E5; --font-display: 'Poppins', sans-serif; --font-serif: var(--font-display); /* Padronizado: Poppins em todo o site */ --font-mono: 'JetBrains Mono', monospace; --font-body: 'Poppins', sans-serif; --max-w: 1440px; --pad: clamp(20px, 6vw, 100px); --radius: 0; /* Sistema de espaçamento fluido */ --space-xs: clamp(16px, 2vw, 24px); --space-sm: clamp(24px, 3vw, 40px); --space-md: clamp(40px, 5vw, 80px); --space-lg: clamp(60px, 8vw, 140px); --space-xl: clamp(80px, 10vw, 160px); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); font-weight: 500; background: var(--off-white); color: var(--black); overflow-x: hidden; cursor: none; } @media (max-width:768px){ body { cursor: auto; } } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; cursor: none; } ul, ol { list-style: none; } ::selection { background: var(--pink); color: var(--yellow); } /* ============================================ CUSTOM CURSOR ============================================ */ .cursor { position: fixed; width: 40px; height: 40px; border: 1.5px solid var(--black); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), mix-blend-mode 0.3s; mix-blend-mode: difference; border-color: white; } .cursor-dot { position: fixed; width: 6px; height: 6px; background: var(--pink); border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); } .cursor.is-hover { width: 80px; height: 80px; background: var(--yellow); border-color: var(--yellow); mix-blend-mode: normal; } .cursor.is-explore { width: 120px; height: 120px; background: var(--pink); border-color: var(--pink); mix-blend-mode: normal; } .cursor.is-explore::after { content: 'explorar'; color: white; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; justify-content: center; height: 100%; } .cursor.is-view { width: 120px; height: 120px; background: var(--yellow); border-color: var(--yellow); mix-blend-mode: normal; } .cursor.is-view::after { content: 'ver case →'; color: var(--black); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 600; } @media (max-width:768px) { .cursor, .cursor-dot { display: none; } } /* ============================================ LOADER ============================================ */ .loader { position: fixed; inset: 0; background: var(--black); z-index: 10001; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: transform 0.9s var(--ease-in-out); } .loader.is-done { transform: translateY(-100%); } .loader__inner { position: relative; width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; } .loader__word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 60px)); font-family: var(--font-display); font-weight: 900; font-size: clamp(60px, 12vw, 160px); color: var(--yellow); letter-spacing: -0.04em; line-height: 1; opacity: 0; white-space: nowrap; text-align: center; } .loader__word:nth-child(1) { animation: loaderWord 0.55s 0.15s forwards var(--ease-out); } .loader__word:nth-child(2) { animation: loaderWord 0.55s 0.65s forwards var(--ease-out); color: var(--off-white); } .loader__word:nth-child(3) { animation: loaderWord 0.55s 1.15s forwards var(--ease-out); color: var(--pink); } .loader__word:nth-child(4) { animation: loaderWord 0.55s 1.65s forwards var(--ease-out); color: var(--off-white); } .loader__word--final { animation: loaderWordFinal 0.55s 2.15s forwards var(--ease-out) !important; color: var(--yellow) !important; } @keyframes loaderWord { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 60px)); } 25% { opacity: 1; transform: translate(-50%, -50%); } 75% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 60px)); } } @keyframes loaderWordFinal { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 60px)) scale(0.9); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .loader__progress { position: absolute; bottom: 40px; right: 40px; font-family: var(--font-mono); color: var(--off-white); font-size: 14px; letter-spacing: 0.1em; } /* ============================================ NAV — FONTE ÚNICA DE VERDADE (logo sempre preto) ============================================ IMPORTANTE: - Removido `mix-blend-mode: difference` que era a CAUSA RAIZ do logo aparecer em cores diferentes (azul/verde/branco) em cada pĂĄgina. Esse blend invertia a cor conforme o fundo. - Nav agora tem fundo off-white DESDE o inĂ­cio → logo preto sempre visĂ­vel, sem depender da seção de fundo. - Exceção Ășnica: menu mobile aberto (fundo escuro) → logo claro. ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); background: var(--off-white); border-bottom: 1px solid transparent; transition: padding 0.3s var(--ease-out), border-color 0.3s var(--ease-out); color: var(--black); } .nav.is-scrolled { padding: 14px var(--pad); border-bottom-color: var(--gray-light); } .nav__logo { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 28px; letter-spacing: -0.11em; display: flex; align-items: baseline; color: var(--black); text-decoration: none; } .nav__logo span { color: var(--black); font-weight: 600; font-family: inherit; font-size: inherit; display: inline; background: none; padding: 0; transition: color 0.3s; } /* Exceção Ășnica: menu mobile aberto sobre fundo escuro */ body.is-menu-open .nav__logo { color: var(--off-white); } body.is-menu-open .nav__logo span { color: var(--pink); } .nav__menu { display: flex; gap: 28px; font-family: var(--font-mono); font-size: 13px; text-transform: lowercase; letter-spacing: 0.05em; } .nav__menu a { position: relative; padding: 4px 0; transition: color 0.2s; } .nav__menu a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out); } .nav__menu a:hover::after { transform: scaleX(1); transform-origin: left; } .nav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--pink); color: var(--off-white); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; transition: transform 0.3s var(--ease-out), background 0.3s; mix-blend-mode: normal; } .nav__cta:hover { transform: translateY(-2px); background: var(--black); } .nav__cta svg { transition: transform 0.3s; } .nav__cta:hover svg { transform: translate(2px, -2px); } @media (max-width: 900px) { .nav__menu { display: none; } .nav__cta { display: none; } } /* ============================================ HAMBURGER + MOBILE MENU ============================================ */ .nav__burger { display: none; width: 44px; height: 44px; position: relative; cursor: pointer; z-index: 101; background: transparent; padding: 0; border: none; color: var(--black); } .nav__burger span { position: absolute; left: 8px; right: 8px; height: 2.5px; background: var(--black); border-radius: 2px; transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out), opacity 0.2s, background 0.3s; } .nav.is-scrolled .nav__burger span { background: var(--black); } .nav__burger span:nth-child(1) { top: 14px; } .nav__burger span:nth-child(2) { top: 21px; } .nav__burger span:nth-child(3) { top: 28px; } .nav__burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); background: var(--off-white); } .nav__burger.is-open span:nth-child(2) { opacity: 0; } .nav__burger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); background: var(--off-white); } @media (max-width: 900px) { .nav__burger { display: block; } } /* ============================================ MOBILE MENU — versĂŁo simplificada Sem animação de entrada (causava opacity:0 preso) ============================================ */ .mobile-menu { position: fixed; inset: 0; background: #0a0a0a; z-index: 99; padding: 20px 30px 40px; transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-menu.is-open { transform: translateY(0); } .mobile-menu__inner { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 55px; } body #mobileMenu ul, body #mobileMenu .mobile-menu__list { font-family: 'Poppins', sans-serif !important; font-weight: 400 !important; font-size: 28px !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; text-transform: lowercase !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } body #mobileMenu li, body #mobileMenu .mobile-menu__list li { border-bottom: 1px solid #222 !important; padding: 12px 0 !important; margin: 0 !important; list-style: none !important; background: transparent !important; opacity: 1 !important; transform: none !important; transition: none !important; white-space: nowrap !important; } body #mobileMenu li a, body #mobileMenu .mobile-menu__list a { display: block !important; color: #f5f5f0 !important; text-decoration: none !important; font-family: 'Poppins', sans-serif !important; font-weight: 400 !important; font-size: inherit !important; background: transparent !important; padding: 0 !important; transition: none !important; transform: none !important; } body #mobileMenu li a:active { color: #FFE600 !important; } .mobile-menu__footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid #222; font-family: var(--font-mono); font-size: 13px; color: #666; display: flex; flex-direction: column; gap: 8px; } .mobile-menu__footer a { color: #FFE600; } body.is-menu-open, html.is-menu-open { overflow: hidden !important; } /* ============================================ FIX: Menu mobile aberto — X de fechar visĂ­vel Vence inclusive .nav.is-scrolled (que pinta fundo branco) ============================================ */ body.is-menu-open .nav, body.is-menu-open nav.nav, body.is-menu-open .nav.is-scrolled, body.is-menu-open nav.nav.is-scrolled { background: transparent; color: var(--off-white); border-bottom: 0; box-shadow: none; } /* Logo no menu aberto jĂĄ tratado na fonte Ășnica (linhas 338-339). Apenas span pink permanece como override pontual: */ body.is-menu-open .nav.is-scrolled .nav__logo { color: var(--off-white); } body.is-menu-open .nav.is-scrolled .nav__logo span { color: var(--pink); } body.is-menu-open .nav__burger, body.is-menu-open .nav__burger.is-open, body.is-menu-open .nav.is-scrolled .nav__burger { z-index: 200 !important; } body.is-menu-open .nav__burger span, body.is-menu-open .nav__burger.is-open span, body.is-menu-open .nav.is-scrolled .nav__burger span, body.is-menu-open .nav.is-scrolled .nav__burger.is-open span { background: var(--off-white) !important; background-color: var(--off-white) !important; } .nav__burger.is-open span:nth-child(1) { top: 21px !important; transform: rotate(45deg) !important; background: var(--off-white) !important; } .nav__burger.is-open span:nth-child(2) { opacity: 0 !important; } .nav__burger.is-open span:nth-child(3) { top: 21px !important; transform: rotate(-45deg) !important; background: var(--off-white) !important; } /* ============================================ CTA FORM ============================================ */ .cta__columns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; position: relative; z-index: 1; } @media (max-width: 1100px) { .cta__columns { grid-template-columns: 1fr; gap: 60px; } } .cta__form { background: var(--off-white); padding: 40px; border: 2px solid var(--black); display: flex; flex-direction: column; gap: 22px; } .cta__form-label { font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 6px; } .field { display: flex; flex-direction: column; gap: 8px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } .cta__form { padding: 28px 22px; } } .field label { font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.1em; color: var(--black); font-weight: 600; } .field label .opt { font-weight: 400; opacity: 0.5; } .field input, .field textarea { font-family: var(--font-body); font-size: 16px; font-weight: 500; padding: 12px 14px; border: 1.5px solid var(--black); background: transparent; color: var(--black); border-radius: 0; transition: border-color 0.3s, background 0.3s, transform 0.3s; -webkit-appearance: none; width: 100%; box-sizing: border-box; } .field textarea { resize: vertical; min-height: 100px; font-family: var(--font-body); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--pink); background: rgba(237, 90, 180, 0.05); } .field input.is-invalid, .field textarea.is-invalid { border-color: #d63434; background: rgba(214, 52, 52, 0.05); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .chip { position: relative; cursor: pointer; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--black); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; letter-spacing: 0.05em; transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out); user-select: none; } .chip:hover span { transform: translateY(-2px); } .chip input:checked + span { background: var(--black); color: var(--yellow); } .form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 28px; background: var(--black); color: var(--off-white); font-family: var(--font-mono); font-size: 13px; text-transform: lowercase; letter-spacing: 0.1em; font-weight: 600; border-radius: 999px; transition: background 0.3s, transform 0.3s var(--ease-out); margin-top: 6px; cursor: pointer; } .form__submit:hover { background: var(--pink); transform: translateY(-2px); } .form__submit:disabled { opacity: 0.5; cursor: not-allowed; } .form__success { font-family: var(--font-mono); font-size: 13px; text-transform: lowercase; letter-spacing: 0.05em; color: var(--pink); font-weight: 600; text-align: center; padding: 12px; background: rgba(237, 90, 180, 0.1); border: 1px dashed var(--pink); display: none; } .form__success.is-visible { display: block; } .cta__direct { display: flex; flex-direction: column; gap: 30px; } .cta__direct-block { display: flex; flex-direction: column; gap: 14px; padding-bottom: 30px; border-bottom: 1.5px solid var(--black); } .cta__direct .cta__email { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.6vw, 36px); line-height: 1; letter-spacing: -0.02em; text-transform: lowercase; margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .cta__direct .cta__email:hover { color: var(--pink); } .cta__direct .cta__channels { grid-template-columns: 1fr; border-top: none; } .cta__direct .cta__channels a { border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; border-bottom: 1.5px solid var(--black); padding: 18px 0; flex-direction: column; align-items: flex-start; gap: 4px; } .cta__direct .cta__channels a:hover { background: transparent; color: var(--black); padding-left: 14px !important; } .cta__direct .cta__channels a:hover .ch__val { color: var(--pink); } .cta__direct .ch__val { font-size: clamp(16px, 1.8vw, 22px); } /* ============================================ HERO ============================================ */ .hero { position: relative; min-height: 100vh; background: var(--off-white); padding: 100px var(--pad) var(--space-md); overflow: hidden; display: flex; flex-direction: column; } /* Quando o browser navega de volta (bfcache), desliga animaçÔes do hero */ .hero--no-anim .hero__word, .hero--no-anim .hero__label, .hero--no-anim .hero__bottom, .hero--no-anim .hero__bigm { animation: none !important; opacity: 1 !important; transform: none !important; } @media (max-width: 900px) { .hero { padding-top: 68px !important; padding-bottom: 20px !important; min-height: 100svh !important; overflow: hidden !important; } .hero__inner { margin-top: 0 !important; padding-top: 8px !important; justify-content: flex-start !important; } .hero__label { margin-bottom: 16px !important; } .hero__bigm { font-size: 82vw !important; bottom: -10vw !important; right: -5vw !important; } } .hero__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 80px; position: relative; z-index: 2; } .hero__label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; letter-spacing: 0.1em; margin-bottom: 50px; opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s 1.4s var(--ease-out) forwards; } .dot { width: 8px; height: 8px; background: var(--pink); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } .hero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(60px, 13vw, 220px); line-height: 0.92; letter-spacing: -0.11em; text-transform: lowercase; margin-bottom: 60px; position: relative; /* overflow visĂ­vel pra nĂŁo cortar descenders */ } .hero__line { display: block; /* sem overflow: hidden — quebra descenders e elementos absolutos */ } .hero__line--small { font-size: 0.55em; margin-top: 0.15em; font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; } .hero__word { display: inline-block; margin-right: 0.15em; opacity: 0; transform: translateY(60px); animation: heroWord 1s var(--ease-out) forwards; will-change: transform, opacity; } [data-shuffle] { display: inline-block; font-feature-settings: "tnum"; } .hero__line:nth-child(1) .hero__word:nth-child(1) { animation-delay: 1.5s; } .hero__line:nth-child(1) .hero__word:nth-child(2) { animation-delay: 1.6s; } .hero__line:nth-child(2) .hero__word:nth-child(1) { animation-delay: 1.75s; } .hero__line:nth-child(2) .hero__word:nth-child(2) { animation-delay: 1.85s; } .hero__line:nth-child(3) .hero__word:nth-child(1) { animation-delay: 2.1s; } .hero__line:nth-child(3) .hero__word:nth-child(2) { animation-delay: 2.2s; } @keyframes heroWord { to { opacity: 1; transform: translateY(0); } } .hero__word--accent { color: var(--pink); position: relative; } .accent-text { display: inline-block; will-change: opacity, transform; } .dot-pink, .dot-yellow { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; } .dot-pink::after { content: '.' !important; display: inline !important; color: var(--pink) !important; background: transparent !important; width: auto !important; height: auto !important; clear: none !important; float: none !important; padding: 0 !important; margin: 0 !important; border: none !important; position: static !important; } .dot-yellow::after { content: '.' !important; display: inline !important; color: var(--yellow) !important; background: transparent !important; width: auto !important; height: auto !important; clear: none !important; float: none !important; padding: 0 !important; margin: 0 !important; border: none !important; position: static !important; } .dot-pink { color: var(--pink); } .dot-yellow { color: var(--yellow); } /* Prevenção: textos com ponto inline nĂŁo quebram */ .highlight-pink, .accent-text { white-space: nowrap; } .hero__word--accent .dot-pink { color: var(--yellow); font-size: 1em; margin-left: -0.05em; } .hero__word--script { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--pink); } .hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 2.5s var(--ease-out) forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } .hero__intro { max-width: 480px; font-size: 17px; line-height: 1.55; color: #333; } .hero__intro strong { color: var(--black); } .hero__scroll { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; letter-spacing: 0.1em; } .hero__scroll svg { animation: scrollBounce 2s infinite; } @keyframes scrollBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* HERO BIG m (minĂșsculo) */ .hero__bigm { position: absolute; right: -3vw; bottom: -12vw; font-family: var(--font-display); font-weight: 900; font-size: 75vw; line-height: 0.75; color: var(--yellow); z-index: 1; pointer-events: none; user-select: none; letter-spacing: -0.11em; opacity: 0; animation: bigMReveal 1.5s 2.8s var(--ease-out) forwards; } @keyframes bigMReveal { to { opacity: 1; } } /* HERO TAGS */ .hero__tag { position: absolute; font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.1em; background: var(--black); color: var(--off-white); padding: 8px 14px; border-radius: 999px; z-index: 3; opacity: 0; pointer-events: none; white-space: nowrap; } .hero__tag--1 { top: 110px; right: 5%; } .hero__tag--2 { top: 170px; right: 11%; background: var(--pink); } .hero__tag--1 { animation: tagPop1 0.6s 1.4s var(--ease-out) forwards; } .hero__tag--2 { animation: tagPop2 0.6s 1.7s var(--ease-out) forwards; } @keyframes tagPop1 { 0% { opacity: 0; transform: scale(0.5) rotate(0deg); } 100% { opacity: 1; transform: scale(1) rotate(6deg); } } @keyframes tagPop2 { 0% { opacity: 0; transform: scale(0.5) rotate(0deg); } 100% { opacity: 1; transform: scale(1) rotate(-5deg); } } @media (max-width: 1100px) { .hero__tag { display: none; } } @media (max-width:768px){ .hero__title { font-size: 18vw; } .hero__bigm { font-size: 90vw; bottom: -15vw; } .hero__tag { display: none; } } /* ============================================ MARQUEE ============================================ */ .marquee { overflow: hidden; padding: 28px 0; border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); } .marquee--yellow { background: var(--yellow); color: var(--black); } .marquee--pink { background: var(--pink); color: var(--off-white); } .marquee__track { display: inline-flex; gap: 60px; white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 7vw, 100px); letter-spacing: -0.10em; text-transform: lowercase; animation: marquee 25s linear infinite; } .marquee__track--reverse { animation: marqueeReverse 25s linear infinite; } /* Faixa amarela: ticker pequeno mono (igual ao hero ticker original) */ .marquee--yellow { padding: 10px 0 !important; border-top: 1px solid var(--black) !important; border-bottom: 1px solid var(--black) !important; } .marquee--yellow .marquee__track { font-family: var(--font-mono) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: lowercase !important; gap: 50px !important; animation-duration: 30s !important; } .marquee--yellow .marquee__track > span::before { content: '★ '; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marqueeReverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* ============================================ SECTIONS — SHARED ============================================ */ .section__header { padding: var(--space-xl) var(--pad) var(--space-md); border-bottom: 1px solid var(--gray-light); scroll-margin-top: 80px; } .section__header--dark { background: var(--black); color: var(--off-white); border-bottom: none; } section[id] { scroll-margin-top: 60px; } .section__num { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: lowercase; margin-bottom: 28px; opacity: 0.7; } .section__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 9vw, 150px); line-height: 0.92; letter-spacing: -0.11em; text-transform: lowercase; } .section__title span { display: block; } .section__title .italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; } .highlight { background: var(--yellow); padding: 0 0.15em; display: inline-block; } .highlight-pink { color: var(--pink); font-style: italic; font-family: var(--font-serif); font-weight: 400; } /* reveal animation — applied via JS */ [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* ============================================ SOMOS ============================================ */ .somos { background: var(--off-white); } /* Banner embaixo de "tendĂȘncias" - TEXTO */ .somos__banner { margin: var(--space-md) 0 0 0; overflow: hidden; background: var(--yellow); padding: 16px 0; border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); } .somos__banner .banner__track { display: flex; gap: 40px; animation: marquee-scroll 25s linear infinite; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.02em; color: var(--black); } .somos__banner .banner__track span { flex-shrink: 0; } /* Banner embaixo de "tendĂȘncias" - IMAGEM */ .somos__banner-image { margin: var(--space-md) calc(-1 * var(--pad)) 0; border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); } .somos__banner-image img { width: 100%; height: auto; display: block; } /* Banner de texto marquee tambĂ©m full-width */ .somos__banner { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); } .somos__grid { padding: var(--space-lg) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--gray-light); } @media (max-width:900px){ .somos__grid { grid-template-columns: 1fr; gap: 60px; } } .somos__text { font-size: 17px; line-height: 1.6; color: #333; } .somos__text .lead { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; color: var(--black); margin-bottom: 30px; font-style: italic; } .somos__text p + p { margin-top: 22px; } .somos__text strong { color: var(--black); } .somos__text em { font-family: var(--font-serif); font-style: italic; color: var(--pink); } .somos__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--black); } .stat { padding: 40px 30px; border-right: 1px solid var(--black); border-bottom: 1px solid var(--black); } .stat:nth-child(2n) { border-right: none; } .stat:nth-child(n+3) { border-bottom: none; } .stat__num { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -0.11em; margin-bottom: 12px; } .stat:nth-child(odd) .stat__num { color: var(--black); } .stat:nth-child(even) .stat__num { color: var(--pink); } .stat__label { font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.1em; color: var(--gray); } /* ============================================ FAZEMOS ============================================ */ .fazemos { background: var(--black); color: var(--off-white); } .services { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid #2a2a2a; } @media (max-width:900px){ .services { grid-template-columns: 1fr; } } .service { padding: var(--space-md) var(--pad); border-right: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; position: relative; transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out); overflow: hidden; } .service:nth-child(2n) { border-right: none; } .service:hover { background: var(--yellow); color: var(--black); } .service:hover .service__num { color: var(--black); } .service:hover .service__tags span { background: var(--black); color: var(--yellow); } .service__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; margin-bottom: 30px; color: var(--pink); } .service__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 4.5vw, 64px); line-height: 0.95; letter-spacing: -0.10em; text-transform: lowercase; margin-bottom: 24px; } .service__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.7em; color: var(--pink); display: inline-block; } .service:hover .service__title em { color: var(--black); } .service__desc { font-size: 16px; line-height: 1.55; max-width: 400px; margin-bottom: 30px; opacity: 0.85; } .service__tags { display: flex; flex-wrap: wrap; gap: 8px; } .service__tags span { font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.05em; padding: 7px 14px; border-radius: 999px; background: var(--pink); color: #fff; transition: background 0.3s, color 0.3s; white-space: nowrap; } .service__hover { position: absolute; bottom: 30px; right: 30px; font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; letter-spacing: 0.1em; opacity: 0; transform: translateX(-20px); transition: opacity 0.4s, transform 0.4s; } .service:hover .service__hover { opacity: 1; transform: translateX(0); } /* ============================================ QUOTE ============================================ */ .quote-section { padding: var(--space-xl) var(--pad); background: var(--off-white); text-align: center; } .quote { max-width: 1100px; margin: 0 auto; position: relative; font-family: var(--font-serif); font-style: italic; font-weight: 400; } .quote__mark { position: absolute; top: -90px; left: 50%; transform: translateX(-50%); font-size: clamp(80px, 12vw, 200px); color: var(--pink); line-height: 1; font-family: var(--font-display); font-weight: 900; font-style: normal; pointer-events: none; } @media (max-width: 768px) { .quote__mark { top: -50px; } .quote-section { padding: var(--space-lg) var(--pad) var(--space-md); } } .quote p { font-size: clamp(28px, 4.5vw, 64px); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 30px; } .quote p em { background: var(--yellow); padding: 0 0.15em; font-style: italic; display: inline-block; } .quote footer { font-family: var(--font-mono); font-style: normal; font-size: 13px; text-transform: lowercase; letter-spacing: 0.1em; color: var(--gray); } /* ============================================ CASES ============================================ */ .cases { background: var(--off-white); } .cases__grid { padding: var(--space-md) var(--pad); display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 30px); } .case { position: relative; cursor: none; transition: transform 0.5s var(--ease-out); grid-column: span 3; } .case--lg { grid-column: span 6; } .case--md { grid-column: span 3; } @media (max-width:900px){ .cases__grid { grid-template-columns: 1fr; } .case, .case--lg, .case--md { grid-column: span 1; } } .case:hover { transform: translateY(-8px); } .case__img { aspect-ratio: 16/10; position: relative; overflow: hidden; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .case--lg .case__img { aspect-ratio: 21/9; } .case__img::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.4s; } .case:hover .case__img::before { opacity: 1; } .case__placeholder { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 4vw, 60px); color: rgba(255,255,255,0.95); text-transform: lowercase; letter-spacing: -0.10em; text-align: center; padding: 0 20px; text-shadow: 0 4px 24px rgba(0,0,0,0.25); } .case__cat { font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.1em; color: var(--gray); display: block; margin-bottom: 10px; } .case__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.10em; text-transform: lowercase; margin-bottom: 10px; } .case__info p { font-size: 15px; line-height: 1.5; color: #555; max-width: 500px; } .cases__cta { text-align: center; padding: 60px 0 120px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 32px; font-family: var(--font-mono); font-size: 13px; text-transform: lowercase; letter-spacing: 0.1em; border-radius: 999px; transition: transform 0.3s var(--ease-out), background 0.3s, color 0.3s; } .btn--outline { border: 1.5px solid var(--black); color: var(--black); } .btn--outline:hover { background: var(--black); color: var(--yellow); transform: translateY(-2px); } .btn--outline:hover svg path { stroke: var(--yellow); } /* ============================================ EQUIPE ============================================ */ .equipe { background: var(--black); color: var(--off-white); } .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #2a2a2a; } @media (max-width:900px){ .team { grid-template-columns: 1fr 1fr; } } @media (max-width:600px){ .team { grid-template-columns: 1fr; } } @media (max-width: 768px) { .team { grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; } .team__card { padding: 16px 12px !important; } .team__photo { aspect-ratio: 1/1 !important; margin-bottom: 12px !important; } .team__info h3 { font-size: 13px !important; margin-bottom: 4px !important; } .team__info span { font-size: 9px !important; margin-bottom: 0 !important; letter-spacing: 0.05em !important; } /* Esconde o texto descritivo no mobile — muito longo pra card pequeno */ .team__info p { display: none !important; } } .team__card { padding: 40px 30px; border-right: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out); } .team__card:hover { background: var(--pink); color: white; } .team__card:hover .team__info span { color: var(--yellow); } .team__photo { aspect-ratio: 4/5; margin-bottom: 24px; position: relative; overflow: hidden; } .team__photo::after { content: ''; position: absolute; inset: 0; background: var(--yellow); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.4s; } .team__card:hover .team__photo::after { opacity: 0.3; } /* placeholders coloridos pra equipe — vĂŁo virar fotos reais */ .team__photo--1 { background: linear-gradient(135deg, #ed5ab4 0%, #fed600 100%); } .team__photo--2 { background: linear-gradient(135deg, #fed600 0%, #0a0a0a 100%); } .team__photo--3 { background: linear-gradient(135deg, #0a0a0a 0%, #ed5ab4 100%); } .team__photo--4 { background: linear-gradient(135deg, #ed5ab4 0%, #4a90e2 100%); } .team__photo--5 { background: linear-gradient(135deg, #fed600 0%, #ed5ab4 100%); } .team__photo--frida { background: linear-gradient(135deg, #fed600 0%, #f5a623 100%); } /* gradientes adicionais pra membros 6, 7, 8+ */ .team__photo--6 { background: linear-gradient(135deg, #4a90e2 0%, #fed600 100%); } .team__photo--7 { background: linear-gradient(135deg, #0a0a0a 0%, #4a90e2 100%); } .team__photo--8 { background: linear-gradient(135deg, #ed5ab4 0%, #0a0a0a 100%); } .team__photo--9 { background: linear-gradient(135deg, #fed600 0%, #ed5ab4 100%); } .team__photo--10 { background: linear-gradient(135deg, #4a90e2 0%, #ed5ab4 100%); } .team__info h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -0.02em; text-transform: lowercase; margin-bottom: 8px; } .team__info span { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.1em; color: var(--pink); margin-bottom: 16px; transition: color 0.4s; } .team__info p { font-size: 14px; line-height: 1.5; opacity: 0.8; } /* ============================================ CTA FINAL ============================================ */ .cta { background: var(--yellow); color: var(--black); padding: var(--space-xl) var(--pad) var(--space-lg); position: relative; overflow: hidden; } .cta::before { content: 'mude. mude. mude. mude. mude.'; position: absolute; bottom: -20px; left: 0; right: 0; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 25vw; line-height: 1; letter-spacing: -0.09em; white-space: nowrap; opacity: 0.06; pointer-events: none; } .cta__inner { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; } .cta__label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; letter-spacing: 0.1em; margin-bottom: 40px; } .cta__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 12vw, 200px); line-height: 1; letter-spacing: -0.11em; text-transform: lowercase; margin-bottom: 60px; } .cta__line { display: block; } .cta__line--accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--pink); letter-spacing: -0.02em; } .cta__intro { max-width: 720px; margin: -30px 0 60px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; color: var(--black); } .cta__intro p { margin: 0 0 16px; } .cta__intro p:last-child { margin-bottom: 0; } .cta__intro strong { font-weight: 700; } .cta__intro em { font-family: var(--font-serif); font-style: italic; color: var(--pink); } .cta__intro a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.2s; } .cta__intro a:hover { color: var(--pink); } @media (max-width: 768px) { .cta__intro { margin: -20px 0 40px; } } .cta__email { display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 3vw, 42px); letter-spacing: -0.02em; text-transform: lowercase; transition: color 0.3s; } .cta__email:hover { color: var(--pink); } .cta__channels { display: flex; flex-direction: column; gap: 0; } .cta__channels a { padding: 18px 0; border-bottom: 1.5px solid var(--black); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; transition: padding-left 0.4s var(--ease-out), color 0.3s; } .cta__channels a:hover { padding-left: 14px; } .cta__channels a:hover .ch__val { color: var(--pink); } .ch__label { font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.1em; opacity: 0.6; } .ch__val { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 2.2vw, 28px); letter-spacing: -0.02em; text-transform: lowercase; } /* ============================================ FOOTER ============================================ */ .footer { background: var(--black); color: var(--off-white); padding: 0; overflow: hidden; } .footer__top { padding: 60px var(--pad) 0; text-align: center; } .footer__big { font-family: var(--font-display); font-weight: 900; font-size: 45vw; line-height: 0.85; letter-spacing: -0.11em; color: var(--yellow); display: inline-block; } /* ponto do footer: ocultar span, renderizar via ::after com resets completos */ .footer__big span, .footer__big mark { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; } .footer__big::after { content: '.' !important; display: inline !important; color: #ED5AB4 !important; font-family: 'Poppins', sans-serif !important; font-size: inherit !important; font-weight: 900 !important; line-height: inherit !important; letter-spacing: 0 !important; background: transparent !important; background-color: transparent !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; clear: none !important; float: none !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; position: static !important; vertical-align: baseline !important; } .footer__bottom { padding: 30px var(--pad); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; border-top: 1px solid #2a2a2a; font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.05em; color: var(--gray); } /* ============================================ UTIL ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================ DEPOIMENTOS — v2.1.0 ============================================ */ .depoimentos { background: var(--black); color: var(--off-white); padding-bottom: 100px; } .depoimentos__grid { padding: 60px var(--pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; } .depoimento { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 24px; transition: transform 0.4s var(--ease-out), border-color 0.3s, background 0.3s; } .depoimento:hover { transform: translateY(-4px); border-color: var(--pink); background: rgba(237,90,180,0.05); } .depoimento__quote { position: relative; flex: 1; } .depoimento__mark { position: absolute; top: -34px; left: -12px; font-family: var(--font-serif); font-size: 100px; line-height: 1; color: var(--yellow); opacity: 0.3; pointer-events: none; } .depoimento__quote p { font-family: var(--font-serif); font-size: 19px; line-height: 1.5; font-style: italic; color: var(--off-white); position: relative; z-index: 1; } .depoimento__author { display: flex; align-items: center; gap: 14px; border-top: 1px dashed rgba(255,255,255,0.15); padding-top: 20px; } .depoimento__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--yellow); } .depoimento__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--off-white); text-transform: lowercase; } .depoimento__cargo { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--gray); text-transform: lowercase; letter-spacing: 0.05em; margin-top: 2px; } .depoimento__linkedin { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--pink); text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.3s; } .depoimento__linkedin:hover { color: var(--yellow); } /* ============================================ PRÊMIOS — v2.1.0 ============================================ */ .premios { background: var(--off-white); } .premios__grid { padding: 60px var(--pad); display: flex; flex-direction: column; gap: 0; } .premio { display: grid; grid-template-columns: 100px 1fr 80px; align-items: center; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--gray-light); transition: padding 0.4s var(--ease-out), background 0.3s; } .premio:last-child { border-bottom: 0; } .premio:hover { padding-left: 16px; background: linear-gradient(90deg, rgba(254,214,0,0.08) 0%, transparent 100%); } .premio a { display: contents; color: inherit; } .premio__year { font-family: var(--font-display); font-weight: 900; font-size: 36px; color: var(--pink); letter-spacing: -0.11em; line-height: 1; } .premio__body { display: flex; flex-direction: column; gap: 6px; } .premio__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; text-transform: lowercase; color: var(--black); margin: 0; } .premio__categoria { font-family: var(--font-mono); font-size: 11px; color: var(--gray); text-transform: lowercase; letter-spacing: 0.05em; } .premio__entidade { font-family: var(--font-mono); font-size: 12px; color: var(--black); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .premio__logo { width: 60px; height: 60px; object-fit: contain; opacity: 0.6; transition: opacity 0.3s; } .premio:hover .premio__logo { opacity: 1; } @media (max-width: 768px) { .depoimentos__grid { padding: 40px var(--pad); grid-template-columns: 1fr; } .depoimento { padding: 28px 24px 22px; } .depoimento__quote p { font-size: 16px; } .premios__grid { padding: 30px var(--pad); } .premio { grid-template-columns: 70px 1fr; gap: 16px; padding: 20px 0; } .premio__logo { display: none; } .premio__year { font-size: 28px; } .premio__title { font-size: 18px; } .premio:hover { padding-left: 0; } } /* ============================================================ MARCAS — carrossel filtrĂĄvel (seção Cases) ============================================================ */ .marcas-carrossel { margin: 40px 0 60px; padding: 0 var(--pad); } .marcas__top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; } .marcas__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: #666; } .marcas__filters { display: flex; flex-wrap: wrap; gap: 4px 28px; border-bottom: 1px solid #e5e5e5; padding-bottom: 0; width: 100%; } .marcas__filter { position: relative; display: inline-flex; align-items: flex-start; gap: 4px; background: transparent; border: 0; padding: 14px 0 16px; margin-bottom: -1px; /* sobrepĂ”e o border-bottom da row */ font-family: var(--font-mono); font-size: 12px; text-transform: lowercase; letter-spacing: 0.05em; color: #999; cursor: pointer; white-space: nowrap; transition: color 0.25s var(--ease-out); } .marcas__filter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s var(--ease-out); } .marcas__filter:hover { color: var(--black); } .marcas__filter.is-active { color: var(--black); } .marcas__filter.is-active::after { transform: scaleX(1); } .marcas__filter-count { font-size: 9px; font-weight: 500; color: var(--pink); line-height: 1; margin-top: 1px; letter-spacing: 0; } .marcas__viewport { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); } .marcas__track { display: flex; align-items: center; gap: 60px; width: max-content; animation: marcas-scroll 40s linear infinite; } .marcas__track.is-static { animation: none; margin: 0 auto; padding: 0 20px; } .marcas-carrossel:hover .marcas__track:not(.is-static) { animation-play-state: paused; } .marca { flex: 0 0 auto; width: 140px; height: 80px; display: flex; align-items: center; justify-content: center; } .marca img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(100%); opacity: 0.55; transition: filter 0.4s var(--ease-out), opacity 0.4s var(--ease-out); } .marca:hover img { filter: grayscale(0); opacity: 1; } @keyframes marcas-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 768px) { .marcas-carrossel { margin: 24px 0 40px; } .marcas__top { gap: 6px; margin-bottom: 24px; } .marcas__filters { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 24px; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%); } .marcas__filters::-webkit-scrollbar { display: none; } .marcas__filter { font-size: 11px; } /* Grid estĂĄtico no mobile — sem animação */ .marcas__viewport { overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; } .marcas__track, .marcas__track.is-static { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; width: 100% !important; animation: none !important; transform: none !important; margin: 0 !important; padding: 0 !important; } .marca { width: 100% !important; height: 50px !important; flex: none !important; } .marca img { opacity: 0.5; filter: grayscale(100%); } } @media (prefers-reduced-motion: reduce) { .marcas__track { animation: none; } .marcas__viewport { overflow-x: auto; } } /* ============================================================ OVERRIDES — letras MUITO juntas (referĂȘncia: logo mude. preto) ============================================================ */ @media (max-width: 900px) { .hero__inner { margin-top: 0 !important; } .hero__label { margin-bottom: 16px !important; } .hero__title { font-size: 15vw; margin-bottom: 32px; } .hero__bottom { flex-direction: column; gap: 20px; } .hero__intro { font-size: 15px; max-width: 100%; } } /* Section headers */ .section__header { padding: var(--space-lg) var(--pad) var(--space-sm); } /* Somos */ .somos__grid { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-md) var(--pad); } .somos__text { font-size: 16px; } .somos__text .lead { font-size: clamp(18px, 5vw, 24px); } /* Stats */ .stat { padding: 28px 20px; } .stat__num { font-size: clamp(36px, 10vw, 60px); } /* Fazemos */ .fazemos__grid { grid-template-columns: 1fr; } .service { padding: var(--space-sm) var(--pad); border-right: none; } .service__title { font-size: clamp(30px, 8vw, 48px); } /* Quote */ .quote p { font-size: clamp(22px, 6vw, 36px); } .quote__mark { font-size: clamp(60px, 16vw, 100px); } /* Equipe */ .team { grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; padding: 0 !important; } /* Olhar */ .olhar-home__header { padding-bottom: var(--space-sm); } .olhar-home__grid { grid-template-columns: 1fr; } /* CTA */ .cta { padding: var(--space-lg) var(--pad) var(--space-md); } .cta__columns { grid-template-columns: 1fr; gap: var(--space-md); } .cta__form { padding: 24px 20px; } .cta__email { font-size: clamp(18px, 5vw, 28px); } /* Footer */ .footer__top { padding: var(--space-sm) var(--pad) 0; } .footer__big { font-size: 38vw; } .footer__bottom { flex-direction: column; text-align: center; gap: 12px; font-size: 10px; } /* Depoimentos */ .depoimentos__grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* Muito pequeno: ajuste extra */ .hero__title { font-size: 18vw; } .section__title { font-size: clamp(36px, 12vw, 60px); } .team { grid-template-columns: repeat(2, 1fr) !important; } .somos__stats { grid-template-columns: 1fr; } .stat:nth-child(2n) { border-right: 1px solid var(--black); } .service__sub { font-size: 14px; } } /* ============================================================ INSTAGRAM FEED ============================================================ */ .instagram-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .instagram-feed__item { aspect-ratio: 1; overflow: hidden; display: block; position: relative; } .instagram-feed__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out), opacity 0.4s; opacity: 0.9; } .instagram-feed__item:hover img { transform: scale(1.05); opacity: 1; } .instagram-cta { padding: var(--space-md) var(--pad); text-align: center; } @media (max-width: 600px) { .instagram-feed { grid-template-columns: repeat(3, 1fr); gap: 2px; } } /* ============================================================ POLÍTICA DE PRIVACIDADE ============================================================ */ .politica { background: var(--off-white); padding: var(--space-xl) var(--pad); } .politica__inner { max-width: 860px; margin: 0 auto; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: #333; } .politica h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 6vw, 72px); letter-spacing: -0.06em; color: var(--black); margin-bottom: 8px; text-transform: lowercase; } .politica__atualizada { font-family: var(--font-mono); font-size: 12px; color: var(--gray); letter-spacing: 0.08em; margin-bottom: var(--space-md); text-transform: lowercase; } .politica section { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--gray-light); } .politica section:last-of-type { border-bottom: none; } .politica h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2.5vw, 28px); letter-spacing: -0.04em; color: var(--black); margin-bottom: 16px; text-transform: lowercase; } .politica h3 { font-weight: 700; font-size: 15px; color: var(--black); margin: 20px 0 8px; text-transform: lowercase; } .politica p { margin-bottom: 14px; } .politica ul { list-style: none; padding: 0; margin: 0 0 14px; } .politica ul li { padding: 6px 0 6px 20px; position: relative; border-bottom: 1px solid var(--gray-light); } .politica ul li::before { content: '→'; position: absolute; left: 0; color: var(--pink); font-family: var(--font-mono); font-size: 12px; } .politica a { color: var(--black); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; transition: color 0.2s; } .politica a:hover { color: var(--pink); } .politica__tabela { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; } .politica__tabela th { background: var(--black); color: var(--yellow); padding: 12px 16px; text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: lowercase; } .politica__tabela td { padding: 12px 16px; border-bottom: 1px solid var(--gray-light); vertical-align: top; } .politica__tabela tr:last-child td { border-bottom: none; } .politica__tabela tr:nth-child(even) td { background: rgba(0,0,0,0.02); } .politica__contato { margin-top: var(--space-md); padding: 20px; background: var(--yellow); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: lowercase; } @media (max-width: 600px) { .politica { padding: var(--space-md) var(--pad); } .politica__tabela { font-size: 12px; } .politica__tabela th, .politica__tabela td { padding: 8px 10px; } } /* ============================================================ COOKIE BANNER ============================================================ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: var(--black); color: var(--off-white); padding: 20px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 3px solid var(--yellow); transition: opacity 0.3s; flex-wrap: wrap; } .cookie-banner__text { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.03em; flex: 1; min-width: 280px; } .cookie-banner__text strong { display: block; color: var(--yellow); font-size: 13px; margin-bottom: 4px; } .cookie-banner__text a { color: var(--pink); text-decoration: underline; margin-left: 4px; } .cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; } .cookie-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: lowercase; padding: 10px 20px; border: none; cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; } .cookie-btn--accept { background: var(--yellow); color: var(--black); font-weight: 700; } .cookie-btn--accept:hover { background: var(--pink); color: #fff; } .cookie-btn--essential { background: transparent; color: var(--off-white); border: 1px solid rgba(255,255,255,0.3); } .cookie-btn--essential:hover { border-color: var(--yellow); color: var(--yellow); } @media (max-width: 600px) { .cookie-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; } .cookie-banner__actions { width: 100%; } .cookie-btn { flex: 1; text-align: center; } } /* ============================================================ PÁGINAS ESTÁTICAS (polĂ­tica, termos, etc.) ============================================================ */ .static-main { min-height: 80vh; background: var(--off-white); padding-top: 80px; } .static-breadcrumb { padding: 20px var(--pad); display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: lowercase; color: var(--gray); border-bottom: 1px solid var(--gray-light); } .static-breadcrumb a { color: var(--pink); text-decoration: none; } .static-breadcrumb a:hover { text-decoration: underline; } /* Nav numa pĂĄgina estĂĄtica — sem cursor especial */ .mude-static .nav { background: var(--off-white); } .mude-static .cursor, .mude-static .cursor-dot { display: none; } /* === FORM: REDUZIR TAMANHO DO WHATSAPP === */ /* campo tel sem restrição de largura — herda do .field-row */ /* === RODAPÉ FORÇADO NA MESMA LINHA (desktop) === */ @media (min-width: 769px) { .footer__bottom { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; text-align: left !important; gap: 20px !important; } .footer__bottom > span { white-space: nowrap !important; } } /* === BADGE "DESDE 2010" nĂŁo corta === */ .hero__badge, .hero__since { white-space: nowrap !important; overflow: visible !important; min-width: max-content !important; } /* === PÁGINA POLÍTICA usa template Mude === */ body.page-template-page-politica .footer { background: var(--black); } /* === SOMOS TEXT: FORÇAR ESQUERDA === */ .somos__text, .somos__text p, .somos__text .lead, .somos__grid .somos__text { text-align: left !important; } /* === OLHAR HOME: GRID 3 COLUNAS DESKTOP === */ .olhar-home { padding: var(--space-md) var(--pad); } .olhar-home__header { margin-bottom: var(--space-md); } .olhar-home__intro { font-size: 16px; color: var(--gray); max-width: 600px; margin-top: 12px; } .olhar-home__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px; margin-bottom: var(--space-md); } .olhar-home__card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.3s var(--ease-out); } .olhar-home__card:hover { transform: translateY(-4px); } .olhar-home__cover { width: 100%; aspect-ratio: 16 / 10; background: var(--gray-light); background-size: cover; background-position: center; margin-bottom: 16px; position: relative; display: flex; align-items: center; justify-content: center; } .olhar-home__placeholder { font-family: var(--font-mono); font-size: 12px; color: #aaa; text-transform: lowercase; letter-spacing: 0.1em; } .olhar-home__info { display: flex; flex-direction: column; gap: 8px; } .olhar-home__meta { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11px; text-transform: lowercase; letter-spacing: 0.05em; color: var(--gray); } .olhar-home__cat { background: var(--yellow); color: var(--black); padding: 2px 8px; font-weight: 600; } .olhar-home__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--black); margin: 4px 0; } .olhar-home__excerpt { font-size: 14px; line-height: 1.5; color: #555; } .olhar-home__time { font-family: var(--font-mono); font-size: 10px; color: var(--gray); text-transform: lowercase; margin-top: 4px; } .olhar-home__cta { display: flex; justify-content: center; margin-top: var(--space-sm); } .olhar-home__cta .btn--outline { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; border: 1px solid var(--black); background: transparent; font-family: var(--font-mono); font-size: 13px; text-transform: lowercase; letter-spacing: 0.05em; text-decoration: none; color: var(--black); transition: all 0.3s var(--ease-out); } .olhar-home__cta .btn--outline:hover { background: var(--black); color: var(--off-white); } /* Mobile olhar */ @media (max-width: 768px) { .olhar-home__grid { grid-template-columns: 1fr !important; } } /* === POLÍTICA — bloco consolidado (logo jĂĄ preto pela fonte Ășnica) === */ body.page-template-page-politica { background: var(--off-white); } body.page-template-page-politica .nav__cta { background: var(--pink); color: var(--off-white); } body.page-template-page-politica .footer { background: var(--black); color: var(--off-white); } body.page-template-page-politica .footer__bottom { padding-bottom: 30px; } /* Esconder header do Enfold caso apareça */ body.page-template-page-politica #header, body.page-template-page-politica #wpadminbar + #header { display: none !important; } /* === CARROSSEL MARCAS: REDUZIR PISCADA === */ .marcas__track { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } .marcas__track.is-static { animation: none !important; } /* === HERO INTRO: TEXTO À ESQUERDA (era o que estava centralizado) === */ .hero__intro, .hero__intro p { text-align: left !important; } .hero__bottom { align-items: flex-end !important; justify-content: space-between !important; } /* (Bloco "POLÍTICA: NAV BRANCO desde o inĂ­cio" removido — duplicado. Estilos da polĂ­tica agora consolidados num Ășnico bloco acima.) */ /* === FOOTER: LOGO NÃO CORTA NO RODAPÉ === */ .footer { overflow: hidden !important; padding-bottom: 0 !important; } .footer__top { overflow: hidden !important; padding-bottom: 20px !important; } .footer__big { display: block !important; line-height: 0.85 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } .footer__bottom { padding: 25px var(--pad) 30px !important; } /* === CARROSSEL MARCAS: SEM BUG NO HOVER === */ .marcas__viewport { overflow: hidden !important; position: relative !important; } .marcas__track { display: flex !important; will-change: transform; animation: marcas-scroll 40s linear infinite; } .marcas__track:hover { animation-play-state: paused !important; } .marcas__track.is-static { animation: none !important; } @keyframes marcas-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marca-item { flex-shrink: 0 !important; opacity: 1 !important; visibility: visible !important; } .marca-item:hover { opacity: 1 !important; } /* (Bloco "POLÍTICA: REMOVER mix-blend-mode" removido — mix-blend-mode foi eliminado da raiz, nĂŁo precisa mais de override.) */ /* === FOOTER LOGO: NÃO CORTAR EMBAIXO === */ .footer__top { padding: 60px var(--pad) 30px !important; overflow: visible !important; } .footer__big { line-height: 1 !important; padding-bottom: 20px !important; } .footer { overflow: hidden; padding-bottom: 0; } /* === CARROSSEL: ANIMAÇÃO ESTÁVEL === */ .marcas__track { display: flex !important; width: max-content !important; animation: marcas-scroll 40s linear infinite !important; } .marcas__track > * { flex-shrink: 0 !important; opacity: 1 !important; visibility: visible !important; } .marcas__viewport { overflow: hidden !important; } /* === HERO INTRO: FORÇA À ESQUERDA (margem zero) === */ .hero .hero__bottom .hero__intro, .hero__bottom .hero__intro { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; align-self: flex-end !important; } .hero__bottom { justify-content: space-between !important; align-items: flex-end !important; } /* === HERO INTRO: max-width controlado === */ .hero .hero__intro, .hero__bottom .hero__intro { max-width: 480px !important; width: 100% !important; flex: 0 0 auto !important; } .footer__bottom > span { display: block !important; text-align: center !important; } /* === POLÍTICA: ESCONDER FOOTER GIGANTE (mude. amarelo) === */ body.page-template-page-politica .footer__top { display: none !important; } body.page-template-page-politica .footer { background: var(--black) !important; } body.page-template-page-politica .footer__bottom { padding: 40px var(--pad) !important; } body.page-template-page-politica .footer__bottom > span { color: var(--off-white) !important; } /* (Bloco "POLÍTICA: NAV BRANCO mix-blend-mode override completo" removido — duplicado.) */ /* === RODAPÉ: TEXTOS NA MESMA LINHA (nĂŁo em 3 linhas) === */ .footer__bottom { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; padding: 25px var(--pad) 30px !important; text-align: left !important; } .footer__bottom > span { display: inline-flex !important; flex: 0 1 auto !important; text-align: left !important; white-space: nowrap !important; } /* Mobile: rodapĂ© em coluna */ @media (max-width: 768px) { .footer__bottom { flex-direction: column !important; align-items: center !important; text-align: center !important; } .footer__bottom > span { text-align: center !important; white-space: normal !important; } } /* (Bloco "POLÍTICA: LOGO AMARELO IGUAL DA HOME" removido — era ele que pintava o logo de amarelo na polĂ­tica, sobrescrevendo todos os outros overrides. Logo agora Ă© preto via fonte Ășnica.) */ /* === POLÍTICA: ROCAPÉ MESMA LINHA + cores === */ body.page-template-page-politica .footer__bottom { flex-direction: row !important; justify-content: space-between !important; } body.page-template-page-politica .footer__bottom > span { color: var(--off-white) !important; } /* === CARROSSEL MARCAS: GARANTIR VISIBILIDADE === */ .marcas__track .marca { flex: 0 0 140px !important; width: 140px !important; height: 80px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 30px !important; opacity: 1 !important; visibility: visible !important; } .marcas__track .marca img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; display: block !important; opacity: 0.55; } .marcas__track .marca:hover img { filter: grayscale(0%); opacity: 1; } /* === ADMIN BAR: empurra nav fixed corretamente quando logado === */ html.html_av_admin_bar_active .nav, body.admin-bar .nav { top: 32px !important; } @media (max-width: 782px) { html.html_av_admin_bar_active .nav, body.admin-bar .nav { top: 46px !important; } } /* === MENU NA POLÍTICA: garantir nĂŁo sobreposto === */ body.page-template-page-politica.admin-bar .nav { top: 32px !important; } @media (max-width: 782px) { body.page-template-page-politica.admin-bar .nav { top: 46px !important; } } /* ============================================================ SINGLE CASE — Layout estruturado com seçÔes de serviço ============================================================ */ /* HERO */ .case-hero { position: relative; width: 100%; } .case-back { position: absolute; top: 24px; left: var(--pad); z-index: 10; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-decoration: none; color: var(--off-white); background: rgba(0,0,0,.35); backdrop-filter: blur(6px); padding: 8px 14px; border-radius: 100px; transition: background .3s; } .case-back:hover { background: rgba(0,0,0,.6); } .case-hero__cover { width: 100%; height: 60vh; min-height: 360px; max-height: 600px; background: linear-gradient(135deg,#0a0a0a,var(--case-cor,#FFE600)); } /* HEADER */ .case-single .case-header, .case-single .case-intro { margin: 0 !important; } .case-header { padding: 28px var(--pad) 24px; border-top: none; } .case-header__inner { max-width: 860px; display: flex; flex-direction: column; gap: 0; } .case-header__cliente { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: lowercase; color: var(--case-cor,#FFE600); background: var(--black); padding: 4px 10px; margin-bottom: 12px; filter: brightness(0.85); align-self: flex-start; } .case-header__title { font-size: clamp(36px,5vw,72px); font-weight: 900; line-height: 1.05; letter-spacing: -.06em; margin: 0 0 10px; } .case-header__subtitulo { font-size: clamp(15px,1.5vw,18px); line-height: 1.5; color: #555; max-width: 640px; margin: 0 0 20px; } .case-header__meta { display: flex; flex-wrap: wrap; gap: 32px; } .case-meta-block { display: flex; flex-direction: column; gap: 4px; } .case-meta-block__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: lowercase; color: #999; } .case-meta-block__val { font-size: 14px; font-weight: 600; } .case-meta-block__link { font-size: 14px; font-weight: 600; color: var(--black); text-decoration: none !important; display: inline-flex; align-items: center; gap: 4px; } .case-meta-block__link:hover { color: var(--pink); text-decoration: none !important; } /* INTRO */ .case-intro { padding: 48px var(--pad); } .case-intro__inner { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(40px,6vw,80px); align-items: start; } .case-intro--no-foto .case-intro__inner { grid-template-columns: 1fr; max-width: 680px; } .case-intro__textos { display: flex; flex-direction: column; gap: 20px; } .case-intro__textos p { font-size: clamp(16px,1.3vw,18px); line-height: 1.75; color: #444; margin: 0; } .case-intro__textos p:first-child { font-size: clamp(16px,1.3vw,18px); font-weight: 500; color: var(--black); line-height: 1.75; } .case-intro__foto { overflow: hidden; border-radius: 4px; aspect-ratio: 4/3; align-self: start; } .case-intro__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); } .case-intro__foto:hover img { transform: scale(1.04); } @media (max-width: 768px) { .case-intro__inner { grid-template-columns: 1fr !important; } .case-intro { padding: 48px var(--pad); } } /* SEÇÕES DE SERVIÇO */ .case-secoes { padding: 0 0 80px; } .case-secoes__inner { max-width: 1400px; margin: 0 auto; padding: 0 var(--pad); } .case-secoes__heading { font-size: clamp(36px,6vw,72px); font-weight: 900; letter-spacing: -.07em; text-align: center; padding: 72px var(--pad) 56px; margin: 0; border-bottom: 1px solid var(--gray-light); } .case-secoes__heading em { color: var(--case-cor,#FFE600); font-style: italic; } .case-secoes__grid { display: flex; flex-direction: column; gap: 0; } .case-secao { display: grid; grid-template-columns: 55% 45%; align-items: stretch; border-top: 1px solid var(--gray-light); min-height: 460px; } .case-secao--alt { grid-template-columns: 45% 55%; } .case-secao--alt .case-secao__foto { order: 2; } .case-secao--alt .case-secao__body { order: 1; } .case-secao__foto { overflow: hidden; position: relative; } .case-secao__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(0.4,0,0.2,1); position: absolute; inset: 0; } .case-secao:hover .case-secao__foto img { transform: scale(1.05); } /* Sem foto: painel de fundo sutil com nĂșmero */ .case-secao__placeholder { width: 100%; height: 100%; min-height: 460px; background: #f5f5f0; display: flex; align-items: center; justify-content: center; border-right: 4px solid var(--case-cor,#FFE600); } .case-secao--alt .case-secao__placeholder { border-right: none; border-left: 4px solid var(--case-cor,#FFE600); } .case-secao__placeholder-num { font-size: clamp(80px,12vw,160px); font-weight: 900; letter-spacing: -.08em; color: rgba(0,0,0,.06); line-height: 1; user-select: none; font-family: var(--font-display); } .case-secao__body { padding: clamp(40px,6vw,80px) clamp(36px,5vw,72px); display: flex; flex-direction: column; justify-content: center; gap: 20px; background: var(--off-white); } .case-secao__body h3 { font-size: clamp(22px,2.5vw,36px); font-weight: 900; letter-spacing: -.04em; margin: 0; line-height: 1.15; color: var(--black); } .case-secao__body h3::before { content: ''; display: block; width: 32px; height: 3px; background: var(--case-cor,#FFE600); margin-bottom: 14px; border-radius: 2px; } .case-secao__body p { font-size: clamp(15px,1.3vw,17px); line-height: 1.8; color: #555; margin: 0; max-width: 480px; } /* RESULTADO */ .case-resultado { padding: 80px var(--pad); } .case-resultado__inner { max-width: 800px; } .case-resultado__inner h2 { font-size: clamp(32px,5vw,64px); font-weight: 900; letter-spacing: -.07em; margin: 0 0 40px; color: var(--black); } .case-resultado__inner p { font-size: clamp(16px,1.6vw,20px); line-height: 1.75; color: var(--black); margin: 0 0 20px; opacity: .85; } .case-resultado__inner p:last-child { margin-bottom: 0; } /* MOBILE */ @media (max-width: 768px) { .case-secao { grid-template-columns: 1fr !important; } .case-secao--alt .case-secao__foto { order: 0; } .case-secao--alt .case-secao__body { order: 0; } .case-secao__foto { min-height: 240px; position: relative; } .case-secao__foto img { position: static; height: 240px; } .case-secao__placeholder { min-height: 240px; } .case-secao__body { padding: 32px var(--pad); } .case-secao__body h3::before { width: 24px; margin-bottom: 10px; } .case-secao__body p { max-width: 100%; } .case-header { padding: 40px var(--pad) 28px; } .case-intro { padding: 40px var(--pad); } .case-secoes { padding-bottom: 48px; } .case-resultado { padding: 48px var(--pad); } .case-secoes__heading { padding: 48px var(--pad) 36px; } } /* ============================================================ CASE CTA FINAL — botĂŁo WhatsApp ============================================================ */ .case-cta-final { padding: 80px var(--pad); background: var(--case-cor, #FFE600); } .case-cta-final__inner { max-width: 800px; } .case-cta-final__title { font-size: clamp(48px, 8vw, 120px); font-weight: 900; letter-spacing: -.08em; line-height: .95; margin: 0 0 48px; color: var(--black); } .case-cta-final__title .cta-line { display: block; } .case-cta-final__title .cta-line--em em { font-style: italic; color: var(--black); opacity: .6; } .case-cta-final__btn { display: inline-flex; align-items: center; gap: 12px; background: var(--black); color: var(--off-white); font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; text-decoration: none; padding: 16px 28px; border-radius: 100px; transition: background .25s, transform .25s; } .case-cta-final__btn:hover { background: #25D366; transform: translateY(-2px); } .case-cta-final__btn svg { flex-shrink: 0; } /* linha embaixo do link do header — remover */ .case-meta-block__link { text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; } .case-meta-block__link::after { display: none !important; } /* ============================================================ CASE INTRO COM FOTO Quando tem foto de destaque, exibe 2 colunas ============================================================ */ .case-intro--com-foto .case-intro__inner { display: grid; grid-template-columns: 1fr 380px; gap: 60px; max-width: 1100px; align-items: center; } .case-intro__textos { display: flex; flex-direction: column; gap: 28px; } .case-intro__foto { border-radius: 8px; overflow: hidden; aspect-ratio: 4/5; } .case-intro__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .case-intro--com-foto .case-intro__inner { grid-template-columns: 1fr; } .case-intro__foto { aspect-ratio: 16/9; order: -1; } }