/* ============================================ DESIGN SYSTEM TIPOGRÁFICO — oCrisMiller Carregado por último; prefixado com `.ds` (no ) para vencer por especificidade as regras Webflow. ============================================ */ /* --- Família única: Space Grotesk (variable) carregada localmente --- */ @font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'), url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; } /* --- Tokens --- */ :root { --font-primary: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --fs-display-xl: 84px; --fs-display-lg: 64px; --fs-display-md: 48px; --fs-display-sm: 28px; --fs-body-lg: 20px; --fs-body-md: 18px; --fs-body-sm: 16px; --fs-body-xs: 12px; --fw-light: 300; --fw-regular: 400; --fw-semibold: 600; } /* --- Reset global de família --- */ html.ds, html.ds body, html.ds h1, html.ds h2, html.ds h3, html.ds h4, html.ds h5, html.ds h6, html.ds p, html.ds span, html.ds div, html.ds a, html.ds li, html.ds button, html.ds input, html.ds textarea, html.ds select { font-family: var(--font-primary) !important; } /* ============================================ DISPLAY XL — Hero gigante ============================================ */ html.ds .titulo, html.ds h1.titulo, html.ds .titulo span { font-family: var(--font-primary) !important; font-size: var(--fs-display-xl) !important; font-weight: var(--fw-regular) !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; } /* ============================================ DISPLAY LG — Headings de seção + Numeração ============================================ */ html.ds .heading, html.ds h1.heading, html.ds .section-pilares-heading, html.ds .section-pilares-1-heading, html.ds .section-pilares-1-heading-duplicate-1, html.ds .section-pilares-1-heading-duplicate-2, html.ds .section-metodologia-heading, html.ds .section-sobre-mim-heading, html.ds .section-faq-heading, html.ds .pilares-laranja, html.ds .service-item-number, html.ds .service-item-number.metodologia-number-04 { font-family: var(--font-primary) !important; font-size: var(--fs-display-lg) !important; font-weight: var(--fw-light) !important; line-height: 1.15 !important; letter-spacing: -0.005em !important; } /* ============================================ CTA "Está pronto..." — Hierarquia clássica Pergunta laranja LIDERA, resposta branca SUPORTA. Ambas com tipografia fluida pra escalar com a tela. ============================================ */ /* Pergunta laranja — protagonista */ html.ds .cta-construir-marca-title, html.ds h1.cta-construir-marca-title { font-family: var(--font-primary) !important; font-size: clamp(40px, 4vw, 80px) !important; font-weight: var(--fw-light) !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; margin: 0 !important; } /* Resposta branca — coadjuvante (convidativa, fácil de ler) */ html.ds .cta-construir-marca-title-white, html.ds .cta-construir-marca-title .cta-construir-marca-title-white { display: block !important; font-family: var(--font-primary) !important; font-size: clamp(18px, 1.5vw, 28px) !important; font-weight: var(--fw-light) !important; line-height: 1.5 !important; letter-spacing: 0 !important; color: #fff !important; margin-top: 1.5rem !important; } /* --- Reestruturação compacta + centralizada do card CTA --- */ /* Wrapper: parar de esticar pra 90vh, agrupar tudo no centro */ html.ds .cta-construir-marca-wrapper { min-height: 0 !important; justify-content: center !important; align-items: center !important; gap: clamp(2rem, 4vw, 4rem) !important; padding: clamp(2rem, 5vw, 4rem) 0 !important; } /* Logo: ocupa a largura toda (visual gigante, mantém impacto) */ html.ds .cta-construir-marca-logo { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; display: flex !important; justify-content: center !important; } html.ds .cta-construir-marca-logo-img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; } /* Content: não esticar — altura natural do texto */ html.ds .cta-construir-marca-content { flex: 0 0 auto !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } /* Texto centralizado dentro do CTA reestruturado */ html.ds .cta-construir-marca-content .cta-construir-marca-title, html.ds .cta-construir-marca-content .cta-construir-marca-title-white { text-align: center !important; } /* Botão mantém largura total mas com tamanho proporcional */ html.ds .cta-construir-marca-button { flex: 0 0 auto !important; max-width: 100% !important; width: 100% !important; } /* ============================================ DISPLAY SM — FAQ titles + frases de fechamento ============================================ */ html.ds .faq-title, html.ds .service-item-title.faq-title, html.ds .metodologia-single-card-title, html.ds .service-item-title.metodologia-single-card-title { font-family: var(--font-primary) !important; font-size: var(--fs-display-sm) !important; font-weight: var(--fw-light) !important; line-height: 1.25 !important; } /* ============================================ BODY LG — Subtítulos curtos em destaque ============================================ */ html.ds .hero-subtitle, html.ds p.hero-subtitle, html.ds .hero-top-section .hero-subtitle, html.ds .section-sobre-mim-subtitle { font-family: var(--font-primary) !important; font-size: var(--fs-body-lg) !important; font-weight: var(--fw-regular) !important; line-height: 1.4 !important; } /* ============================================ BODY MD — Texto corrido + subtítulos de cards ============================================ */ html.ds .text-size-medium, html.ds .text-color-muted, html.ds .text-size-medium.text-color-muted, html.ds .text-block-3 { font-family: var(--font-primary) !important; font-size: var(--fs-body-md) !important; font-weight: var(--fw-light) !important; line-height: 1.5 !important; } /* Subtítulos UPPER dos cards (MERCADO SATURADO etc.) usam peso 600 */ html.ds .service-item-title, html.ds h2.service-item-title { font-family: var(--font-primary) !important; font-size: var(--fs-body-md) !important; font-weight: var(--fw-semibold) !important; line-height: 1.2 !important; } /* ============================================ BUTTON — todos os CTAs ============================================ */ html.ds .hero-button, html.ds .metodologia-single-card-button, html.ds .cta-construir-marca-button, html.ds .button, html.ds a.button, html.ds a.hero-button { font-family: var(--font-primary) !important; font-size: var(--fs-body-md) !important; font-weight: var(--fw-semibold) !important; line-height: 1.4 !important; letter-spacing: 0.02em !important; } /* ============================================ BODY SM — Footer social + labels médias ============================================ */ html.ds .footer-social-text, html.ds .hero-test-text, html.ds p.hero-test-text { font-family: var(--font-primary) !important; font-size: var(--fs-body-sm) !important; font-weight: var(--fw-regular) !important; line-height: 1.3 !important; } /* ============================================ BODY XS — Mini-labels, copyright ============================================ */ html.ds .text-block-4, html.ds .text-block-4.section-pilares-badge, html.ds .footer-dev-text { font-family: var(--font-primary) !important; font-size: var(--fs-body-xs) !important; font-weight: var(--fw-regular) !important; line-height: 1.3 !important; letter-spacing: 0.05em !important; } html.ds .footer-policy-link { font-family: var(--font-primary); font-size: 12px; font-weight: 400; letter-spacing: 0.05em; color: rgba(0, 0, 0, 0.65); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } html.ds .footer-policy-link:hover { color: #000; } /* ============================================ PATCHES — Seção Sobre Mim Tipografia maior pra texto biográfico. ============================================ */ /* Heading principal — tamanho calibrado pra "Eu transformo histórias" caber em uma linha */ html.ds .section-sobre-mim-heading, html.ds h1.section-sobre-mim-heading { font-size: clamp(36px, 2.8vw, 56px) !important; line-height: 1.2 !important; text-wrap: balance !important; } /* Subtítulo (frase em destaque) */ html.ds .section-sobre-mim-subtitle { font-size: clamp(22px, 2vw, 32px) !important; line-height: 1.4 !important; font-weight: 400 !important; } /* Parágrafos biográficos */ html.ds .section-sobre-mim-text { font-size: clamp(18px, 1.4vw, 22px) !important; line-height: 1.55 !important; } /* Sobre Mim: altura proporcional ao viewport — meio termo entre o gigante e o compacto */ html.ds .section-sobre-mim, html.ds .section-sobre-mim-image { height: 90vh !important; min-height: 700px !important; max-height: 1150px !important; } /* Imagem do card sobre-mim ocupa 100% da altura disponível pelo grid */ html.ds .section-sobre-mim-image { align-self: stretch !important; } /* ============================================ PATCHES — Seção FAQ Tipografia maior pra cards de pergunta/resposta. ============================================ */ /* Títulos do FAQ — perguntas (caixa baixa, sem Title Case) */ html.ds .faq-title, html.ds .service-item-title.faq-title { font-size: clamp(28px, 2.6vw, 48px) !important; line-height: 1.2 !important; text-transform: none !important; margin-bottom: 1.5rem !important; } /* Respostas do FAQ — textos descritivos */ html.ds .faq-description, html.ds .text-size-medium.faq-description, html.ds .text-color-muted.faq-description, html.ds .text-size-medium.text-color-muted.faq-description { font-size: clamp(18px, 1.5vw, 26px) !important; line-height: 1.55 !important; } /* ============================================ PATCHES — Seção Metodologia ============================================ */ /* 1) Respiro maior entre título e descrição dentro dos cards 01-04 */ html.ds .metodologia-card .service-item-title, html.ds .metodologia-card h2.service-item-title { margin-bottom: 1.25rem !important; } /* 2) Descrição com um leve aumento (override desktop está no bloco @media abaixo) */ html.ds .metodologia-description, html.ds .text-size-medium.metodologia-description { font-size: var(--fs-body-lg) !important; line-height: 1.6 !important; } /* 3) Painel lateral direito ocupa a altura completa da grid 2x2 (~2 cards) */ html.ds .metodologia-single-card-wrapper { height: auto !important; min-height: 0 !important; align-self: stretch !important; } html.ds .metodologia-single-card { height: 100% !important; min-height: 100% !important; align-self: stretch !important; } /* A imagem do painel deve crescer junto com o card sem distorcer */ html.ds .metodologia-single-card-image-wrapper { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; margin: 0 !important; align-items: stretch !important; justify-content: stretch !important; } /* Imagem preenche o wrapper, alinhada ao topo, mantendo proporção via cover */ html.ds .metodologia-single-card-image-wrapper picture, html.ds .metodologia-single-card-image-wrapper img, html.ds .metodologia-single-card-image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; display: block !important; } /* Layout interno do card lateral: padding uniforme + espaçamento entre blocos */ html.ds .metodologia-single-card { display: flex !important; flex-direction: column !important; padding: 20px !important; gap: 20px !important; } /* Conteúdo (título + botão): desabilita o position: absolute herdado de .service-content-bottom, ocupa toda a largura disponível e empilha com gap controlado */ html.ds .metodologia-single-card-content, html.ds .service-content-bottom.metodologia-single-card-content { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } /* Título do painel lateral: caixa baixa (as primeiras letras já estão capitalizadas no HTML) */ html.ds .metodologia-single-card-title, html.ds .service-item-title.metodologia-single-card-title { text-transform: none !important; } /* Botão do painel preenche a largura inteira (mesma margem das laterais e do topo da imagem) */ html.ds .metodologia-single-card-button { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* ============================================ ACESSIBILIDADE — Skip to content ============================================ */ .skip-to-content { position: absolute; top: -100px; left: 8px; background: #FF3300; color: #fff; padding: 12px 20px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; border-radius: 8px; z-index: 9999999; transition: top 0.2s ease-out; } .skip-to-content:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; } /* ============================================ HOVER STATES — micro-interações discretas ============================================ */ html.ds .hero-button, html.ds .button.primary, html.ds .service-bottom-button, html.ds .metodologia-single-card-button, html.ds .pilares-button { transition: transform 0.25s ease-out, filter 0.25s ease-out, box-shadow 0.25s ease-out !important; } html.ds .hero-button:hover, html.ds .button.primary:hover, html.ds .service-bottom-button:hover, html.ds .metodologia-single-card-button:hover, html.ds .pilares-button:hover { transform: translateY(-2px) !important; filter: brightness(1.08) !important; box-shadow: 0 8px 24px rgba(255, 51, 0, 0.25) !important; } /* Cards (service, FAQ, metodologia) ganham elevação leve no hover */ html.ds .service-card, html.ds .faq-card, html.ds .metodologia-card, html.ds .footer-social-card { transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important; } html.ds .service-card:hover, html.ds .faq-card:hover, html.ds .metodologia-card:hover, html.ds .footer-social-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important; } /* Links de redes sociais no footer — pequeno scale no ícone */ html.ds .footer-social-card .footer-social-icon { transition: transform 0.25s ease-out !important; } html.ds .footer-social-card:hover .footer-social-icon { transform: scale(1.15) !important; } /* ============================================ SCROLL REVEAL — fade up suave ao entrar na viewport ============================================ */ html.ds .reveal { opacity: 0 !important; transform: translateY(24px) !important; transition: opacity 0.7s ease-out, transform 0.7s ease-out !important; will-change: opacity, transform; } html.ds .reveal.is-visible { opacity: 1 !important; transform: translateY(0) !important; } /* ============================================ MOBILE — sobrescritas pra telas <= 767px Redefine tokens tipográficos e ajusta seções específicas ============================================ */ @media screen and (max-width: 767px) { /* Reescalar tokens: mantém a hierarquia mas em escala mobile */ html.ds { --fs-display-xl: 38px; /* hero — caía pra 84px */ --fs-display-lg: 28px; /* headings de seção — caía 64px */ --fs-display-md: 24px; /* CTAs grandes */ --fs-display-sm: 22px; /* subtítulos */ --fs-body-lg: 17px; --fs-body-md: 16px; --fs-body-sm: 14px; } /* Hero — altura cheia da viewport mobile (svh evita bug do address bar) */ .home-hero-image-wrapper { height: 100svh !important; min-height: 600px !important; } html.ds .titulo, html.ds h1.titulo, html.ds .titulo span { font-size: var(--fs-display-xl) !important; line-height: 1.1 !important; padding: 0 .25rem !important; } html.ds .hero-subtitle, html.ds p.hero-subtitle { font-size: var(--fs-body-md) !important; line-height: 1.4 !important; } /* ============================================ BOTÕES PADRONIZADOS — todos com mesmo tamanho, fonte, espaçamento ============================================ */ html.ds .hero-button, html.ds a.hero-button, html.ds .service-bottom-button, html.ds .button.primary, html.ds .button.primary.large, html.ds .pilares-button, html.ds .metodologia-single-card-button, html.ds .cta-construir-marca-button { /* Tamanho e formato uniformes */ width: 100% !important; max-width: 100% !important; min-height: 52px !important; height: auto !important; padding: 16px 20px !important; box-sizing: border-box !important; /* Tipografia uniforme */ font-family: var(--font-primary) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.8px !important; line-height: 1.2 !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* Alinhamento */ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; } /* Hero button mantém margin lateral pra não tocar nas bordas do vídeo */ html.ds .hero-button, html.ds a.hero-button { width: auto !important; max-width: calc(100% - 1.5rem) !important; margin: 0 .75rem !important; } /* Pílar (PU/MC/CF) com setinha à direita — afastar texto da seta */ html.ds .pilares-button { justify-content: space-between !important; padding: 16px 24px !important; } html.ds .pilares-button-icon { flex-shrink: 0 !important; width: 14px !important; height: 14px !important; } .home-hero-content { padding: 1.5rem 1.25rem 1.75rem !important; } .hero-bottom-section { padding-bottom: 1.5rem !important; width: 100% !important; box-sizing: border-box !important; } /* Headings de seção (.heading): respeito wrap, padding lateral */ html.ds .heading { font-size: var(--fs-display-lg) !important; line-height: 1.2 !important; text-wrap: balance; } /* Reduzir padding e altura forçada das seções/cards em mobile */ .sesh4, .sesh2, .sesh2.medium, .section-pilares, .section-metodologia, .section-sobre-mim { padding: 1.5rem !important; min-height: 0 !important; height: auto !important; } /* Card "O problema" — em mobile fica LARANJA (não preto como no desktop) */ html.ds .card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)) { background-color: #FF3300 !important; background: #FF3300 !important; } /* Badge "O problema" sobre fundo laranja — fundo branco pra contrastar */ html.ds .card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)) .text-block-4 { background-color: #fff !important; color: #000 !important; } /* Override de regras :has() do desktop — usa mesma especificidade :not() pra vencer */ html.ds .card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)), html.ds .card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)) .sesh4, html.ds .card.secondary:has(.section-pilares-badge), html.ds .card.secondary:has(.section-pilares-badge) .sesh4, html.ds .card.secondary:has(.section-metodologia-badge), html.ds .card.secondary:has(.section-metodologia), html.ds .card.secondary:has(.section-metodologia-badge) .sesh4, html.ds .card.secondary:has(.section-metodologia) .sesh4, html.ds .card.secondary:has(.section-faq-badge), html.ds .card.secondary:has(.section-faq), html.ds .card.secondary:has(.section-faq-badge) .sesh4, html.ds .card.secondary:has(.section-faq) .sesh4, html.ds .card.secondary:has(.pilares-laranja), html.ds .card.secondary:has(.section-pilares-1), html.ds .card.secondary:has(.section-pilares-2) { min-height: 0 !important; height: auto !important; } /* Badges e wrappers de título — no desktop são position:absolute. Em mobile, colocar tudo no fluxo pra não sobrepor texto */ .section-sobre-mim-badge, .section-metodologia-badge, .section-faq-badge, .section-pilares-badge, .text-block-4, .faq-title-wrapper, .metodologia-title-wrapper, .service-title-wrapper, [class*="title-wrapper"] { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } .section-sobre-mim-badge, .section-metodologia-badge, .section-faq-badge, .section-pilares-badge, .text-block-4 { margin-bottom: 1rem !important; display: inline-block !important; border: none !important; outline: none !important; box-shadow: none !important; } /* Conteúdos internos de seção (sobre-mim, pilares etc) que estavam position:absolute em desktop pra criar layouts sobrepostos — em mobile colocamos no fluxo */ .section-sobre-mim-content, .section-pilares-1-content, [class*="section-pilares-1-content-duplicate"], .section-pilares-2-content, .section-metodologia-content, .section-faq-content { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; margin-top: 1rem !important; padding: 0 !important; } /* Garantir que título vem antes do texto-resposta dentro dos cards */ .faq-card, .metodologia-card { display: flex !important; flex-direction: column !important; gap: .75rem !important; } .faq-title-wrapper, .metodologia-title-wrapper { order: 1 !important; margin-bottom: .5rem !important; } .service-content-bottom, .faq-content-bottom, .metodologia-content-bottom { order: 2 !important; margin-top: 0 !important; } /* TODOS os badges/wrappers de pílares (P, U, M, C, F e duplicates) — esconder em mobile pra não sobrepor textos/imagens dos cards de pílar */ [class*="pilares-badge-p-wrapper"], [class*="pilares-badge-u-wrapper"], [class*="pilares-badge-m-wrapper"], [class*="pilares-badge-c-wrapper"], [class*="pilares-badge-f-wrapper"], .pilares-badge-p, .pilares-badge-u, [class*="pilares-badge-p-duplicate"], [class*="pilares-badge-u-duplicate"] { display: none !important; } /* MOSTRAR "Único"/"Clara"/"Forte" no título dos pilares (era escondido) — em laranja */ html.ds .section-pilares-1-heading .pilares-laranja, html.ds [class*="section-pilares-1-heading"] .pilares-laranja { display: inline !important; color: #FF3300 !important; } /* Badges PU/MC/CF no topo de cada card de texto pilar (via ::before) */ html.ds .section-pilares-1::before, html.ds .section-pilares-1-duplicate-1::before, html.ds .section-pilares-1-duplicate-2::before { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #000; border: 1.5px solid #000; line-height: 1; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 18px; width: fit-content; font-family: 'Space Grotesk', sans-serif; } html.ds .section-pilares-1::before { content: 'PU'; } html.ds .section-pilares-1-duplicate-1::before { content: 'MC'; } html.ds .section-pilares-1-duplicate-2::before { content: 'CF'; } /* Cards de problema (01/02/03) — "01." era position absolute na desktop, agora fica no fluxo */ .service-item-number { position: static !important; top: auto !important; left: auto !important; bottom: auto !important; } /* Cards de problema (01/02/03) — flex column compacto */ .service-card, .home-services-grid > .service-card { height: auto !important; min-height: 0 !important; max-height: none !important; padding: 1.75rem !important; display: flex !important; flex-direction: column !important; gap: 1.5rem !important; overflow: visible !important; justify-content: flex-start !important; } .service-item-number { font-size: 36px !important; line-height: 1 !important; margin: 0 !important; font-weight: 300 !important; } .service-content-bottom { margin-top: 0 !important; position: static !important; bottom: auto !important; display: block !important; } html.ds .service-item-title { font-size: 18px !important; margin-bottom: .75rem !important; letter-spacing: 0.5px !important; } /* Pílares — empilhar texto + imagem */ .pilares-sections-grid, .pilares-sections-grid-inverted-1, .pilares-sections-grid-inverted-2 { grid-template-columns: 1fr !important; grid-row-gap: 1rem !important; } /* Botões de pílares (PU/MC/CF) — empilhar em vez de 3 colunas */ .pilares-buttons-grid { display: grid !important; grid-template-columns: 1fr !important; grid-row-gap: .75rem !important; width: 100% !important; } .pilares-button { width: 100% !important; font-size: 12px !important; padding: 14px 18px !important; justify-content: center !important; } /* Cards de pílares — texto livre, imagem com proporção menor (não dominar) */ .section-pilares-1, .section-pilares-mc, .section-pilares-cf, [class*="section-pilares-1-duplicate"] { height: auto !important; min-height: 0 !important; padding: 1.5rem !important; } /* Texto descritivo dos pílares ocupar toda a largura do card */ html.ds .section-pilares-1-text, html.ds [class*="section-pilares-1-text-duplicate"] { max-width: 100% !important; width: 100% !important; } html.ds .section-pilares-1-content, html.ds [class*="section-pilares-1-content-duplicate"] { max-width: 100% !important; width: 100% !important; } .section-pilares-2, [class*="section-pilares-2-duplicate"], .section-pilares-mc-image, .section-pilares-cf-image { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10 !important; width: 100% !important; background-size: cover !important; background-position: center !important; } /* Em mobile, força ordem: imagem antes do texto não, manter texto antes da imagem */ .pilares-sections-grid, .pilares-sections-grid-inverted-1, .pilares-sections-grid-inverted-2 { direction: ltr !important; } /* Sobre Mim e demais cards: liberar altura */ .section-sobre-mim-content, .section-sobre-mim-image, .home-services-grid > .card, .metodologia-cards-grid > .card, .faq-cards-grid > .card, .metodologia-single-card { height: auto !important; min-height: 0 !important; max-height: none !important; } /* Cards de FAQ e Metodologia (com texto): flex column compacto, padding padronizado 28px */ .faq-card, .metodologia-card { display: flex !important; flex-direction: column !important; gap: 1rem !important; overflow: visible !important; padding: 28px !important; } /* Reduzir gap exagerado entre pergunta e resposta no FAQ */ html.ds .faq-card .service-content-bottom, html.ds .faq-content-bottom { margin-top: .75rem !important; } .section-pilares-1, .section-pilares-2, [class*="section-pilares-1-duplicate"], [class*="section-pilares-2-duplicate"] { height: auto !important; min-height: auto !important; padding: 1.5rem !important; } .section-pilares-1-content, [class*="section-pilares-1-content-duplicate"] { padding: 1.5rem !important; } html.ds .section-pilares-1-heading, html.ds [class*="section-pilares-1-heading-duplicate"] { font-size: var(--fs-display-md) !important; } .pilares-badge-p-wrapper { position: relative !important; top: auto !important; left: auto !important; margin-bottom: 1rem !important; } .pilares-button { width: 100% !important; font-size: 12px !important; } /* Metodologia */ .metodologia-grid-wrapper { display: flex !important; flex-direction: column !important; gap: 1rem !important; width: 100% !important; } .metodologia-cards-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; grid-row-gap: 1rem !important; width: 100% !important; } .metodologia-single-card-wrapper { width: 100% !important; } .metodologia-card { min-height: auto !important; height: auto !important; padding: 28px !important; } .metodologia-single-card { padding: 1.5rem !important; height: auto !important; min-height: auto !important; } html.ds .section-metodologia-heading { font-size: var(--fs-display-lg) !important; } /* Conteúdo do service-card e faq-card também tem max-width 70% no desktop */ html.ds .service-content-bottom, html.ds .faq-content-bottom, html.ds .metodologia-content-bottom, html.ds .faq-title-wrapper { max-width: 100% !important; width: 100% !important; } /* Sobre Mim — card BRANCO em mobile (segue padrão dos cards "PU,MC&CF", "Metodologia") */ .sobre-mim-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Card de texto do Sobre mim: fundo branco, texto preto, padding padronizado com os outros cards (28px lateral / 36px vertical) */ html.ds .sobre-mim-grid .card.secondary:has(.section-sobre-mim) { background-color: #fff !important; background: #fff !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; } /* Anular o fundo branco interno do .sesh4 do Sobre mim e padronizar o padding */ html.ds .sesh4.section-sobre-mim { background-color: transparent !important; background: transparent !important; padding: 36px 28px !important; } /* Foto do Sobre mim edge-to-edge */ html.ds .sesh4.section-sobre-mim-image { padding: 0 !important; background-color: transparent !important; } html.ds .section-sobre-mim-heading, html.ds h1.section-sobre-mim-heading, html.ds .section-sobre-mim-subtitle, html.ds .section-sobre-mim-text, html.ds .section-sobre-mim-content, html.ds .section-sobre-mim-content p, html.ds .section-sobre-mim-content div { color: #000 !important; } /* Badge "Sobre mim" outline preto pill (mesmo padrão do "PU,MC&CF" e "Metodologia") */ html.ds .section-sobre-mim-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: transparent !important; background: transparent !important; color: #000 !important; border: 1.5px solid #000 !important; line-height: 1 !important; padding: 8px 14px !important; border-radius: 999px !important; } .section-sobre-mim { flex-direction: column !important; } /* Imagem do Sobre mim: colar no card de texto (sem gap), sem fundo laranja */ html.ds .sobre-mim-grid .card.secondary:has(.section-sobre-mim-image) { background-color: transparent !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important; padding: 0 !important; overflow: hidden !important; } html.ds .section-sobre-mim-image, html.ds .sesh4.section-sobre-mim-image { height: auto !important; aspect-ratio: 4 / 5 !important; min-height: 0 !important; max-height: 460px !important; border-radius: 0 !important; width: 100% !important; background-position: center 20% !important; } html.ds .section-sobre-mim-heading, html.ds h1.section-sobre-mim-heading { font-size: 24px !important; line-height: 1.15 !important; max-width: 100% !important; } html.ds .section-sobre-mim-subtitle { font-size: 14px !important; line-height: 1.4 !important; max-width: 100% !important; } html.ds .section-sobre-mim-content p, html.ds .section-sobre-mim-content div { max-width: 100% !important; font-size: 14px !important; line-height: 1.5 !important; } /* Liberar altura do card Sobre Mim — tinha min-height 700px / max-height 1150px / overflow hidden auto que criava scrollbar interno cortando o texto */ html.ds .sesh4.section-sobre-mim { min-height: 0 !important; max-height: none !important; height: auto !important; overflow: visible !important; } html.ds .sobre-mim-grid { overflow: visible !important; } /* FAQ */ .faq-cards-grid { grid-template-columns: 1fr !important; grid-row-gap: 1rem !important; } .faq-card { min-height: auto !important; padding: 28px !important; } html.ds .faq-title { font-size: var(--fs-display-sm) !important; } /* CTA "Está pronto" */ .cta-construir-marca { padding: 2rem 1.5rem !important; } .cta-construir-marca-pergunta, html.ds .cta-construir-marca-pergunta { font-size: var(--fs-display-md) !important; line-height: 1.2 !important; } /* Footer redes sociais — empilhar em 2x2 ou 1 coluna */ .footer-social-cards-grid { grid-template-columns: 1fr 1fr !important; grid-gap: .75rem !important; } .footer-social-card { padding: 1rem !important; } .footer-bottom-content { flex-direction: column !important; gap: 1.5rem !important; text-align: center !important; } /* Botão CTA após cards de problema — adicionar respiro vertical */ .button-wrapper-full { margin-top: 1rem !important; } /* Margem lateral mínima de 8px em TUDO (hero, marquee, cards, CTA, typeform) pra os elementos não encostarem na borda da tela */ .padding-global { padding-left: 8px !important; padding-right: 8px !important; max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Hero ganha radius pra match com os outros cards */ .home-hero-image-wrapper { border-radius: 20px !important; } .padding-top.padding-small { padding-top: 1rem !important; padding-left: 0 !important; padding-right: 0 !important; } .padding-top { padding-left: 0 !important; padding-right: 0 !important; } .padding-bottom { padding-left: 0 !important; padding-right: 0 !important; } .margin-bottom.margin-small { margin-bottom: 1rem !important; margin-left: 0 !important; margin-right: 0 !important; } /* CTA construir marca: padding-global precisa ter os 8px iguais aos outros */ .cta-construir-marca-wrapper { padding-left: 0 !important; padding-right: 0 !important; } /* Garantir que nada cause scroll horizontal */ body, .body, .page-wrapper, .main-wrapper { overflow-x: hidden !important; max-width: 100vw !important; } /* ============================================ CURADORIA DE DESIGN — refinamentos finais mobile ============================================ */ /* 1. Hero: subtítulo com respiro do título, e botão sobe */ html.ds .hero-top-section .hero-subtitle, html.ds .hero-subtitle { margin-top: 20px !important; line-height: 1.4 !important; } .hero-bottom-section { padding-bottom: 2rem !important; } /* 2. Border-radius PADRONIZADO em todos os cards: 20px */ html.ds .card, html.ds .card.secondary, html.ds .service-card, html.ds .faq-card, html.ds .metodologia-card, html.ds .cta-construir-marca-card { border-radius: 20px !important; } /* 3. Contraste do texto descritivo cinza-claro (estava 138,138,146 ~ falha WCAG) Padronizado pra rgb(75,75,85) — passa AAA em todos os textos descritivos */ html.ds .text-color-muted, html.ds .text-size-medium.text-color-muted, html.ds .service-content-bottom .text-size-medium, html.ds .section-pilares-1-text, html.ds .section-pilares-mc-text, html.ds .section-pilares-cf-text, html.ds [class*="section-pilares-1-text-duplicate"], html.ds .faq-content-bottom .text-size-medium, html.ds .metodologia-content-bottom .text-size-medium { color: rgb(75, 75, 85) !important; } /* Card Sobre Mim agora é branco — texto descritivo precisa ser preto */ html.ds .card.secondary:has(.section-sobre-mim) .section-sobre-mim-text, html.ds .card.secondary:has(.section-sobre-mim) .section-sobre-mim-subtitle { color: #000 !important; } /* 4. Cards "PU,MC&CF" e demais headings de seção — centralizar vertical pra eliminar espaço vazio que aparecia no rodapé do card preto */ html.ds .card.secondary:has(.section-pilares-badge) .sesh4, html.ds .card.secondary:has(.section-metodologia-badge) .sesh4, html.ds .card.secondary:has(.section-metodologia) .sesh4, html.ds .card.secondary:has(.section-faq-badge) .sesh4, html.ds .card.secondary:has(.section-faq) .sesh4 { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1.25rem !important; padding: 2.25rem 1.5rem !important; } html.ds .text-block-4 { margin-bottom: 0 !important; } html.ds .card.secondary:has(.section-pilares-badge) .heading, html.ds .card.secondary:has(.section-metodologia-badge) .heading, html.ds .card.secondary:has(.section-faq-badge) .heading { margin-top: 0 !important; } /* Card "Metodologia" descritivo: padding reduzido pro texto não quebrar tão estreito */ html.ds .card.secondary:has(.section-metodologia) { padding: 1.25rem 1rem !important; } /* 5. CTA "Está pronto": logo menor, padding maior, heading caber em menos linhas */ .cta-construir-marca-card { padding: 2.5rem 1.75rem !important; } .cta-construir-marca-logo-img, .cta-construir-marca-logo { max-width: 200px !important; height: auto !important; margin-bottom: 1.5rem !important; } html.ds .cta-construir-marca-pergunta, html.ds [class*="cta-construir-marca-pergunta"] { font-size: 26px !important; line-height: 1.15 !important; } html.ds .cta-construir-marca-resposta, html.ds [class*="cta-construir-marca-resposta"] { margin-top: 1.25rem !important; margin-bottom: 1.5rem !important; } /* 6. Pílares: FUNDIR texto + imagem visualmente em 1 bloco (sem gap, mesmo radius). Grid outer com radius + overflow hidden — não precisa de bg preto pq não vai aparecer nenhum espaço entre os cards */ html.ds .pilares-sections-grid, html.ds .pilares-sections-grid-inverted-1, html.ds .pilares-sections-grid-inverted-2 { grid-row-gap: 0 !important; gap: 0 !important; border-radius: 20px !important; overflow: hidden !important; background-color: transparent !important; } /* Cards individuais dentro do grid de pílar — zerar radius e padding */ html.ds .pilares-sections-grid > .card, html.ds .pilares-sections-grid-inverted-1 > .card, html.ds .pilares-sections-grid-inverted-2 > .card { border-radius: 0 !important; padding: 0 !important; background-color: transparent !important; } /* Card de TEXTO do pílar (fica embaixo no mobile): fundo branco, padding padronizado com cards "O problema" e "PU, MC & CF" (36px vertical, 28px lateral) */ html.ds .section-pilares-1, html.ds .section-pilares-mc, html.ds .section-pilares-cf, html.ds [class*="section-pilares-1-duplicate"] { background-color: #fff !important; padding: 36px 28px !important; border-radius: 0 !important; } /* Zerar padding interno do wrapper de conteúdo pra evitar double padding (que jogava o texto a 52px da borda em vez de 28px) */ html.ds .section-pilares-1-content, html.ds [class*="section-pilares-1-content-duplicate"] { padding: 0 !important; margin-top: 0 !important; } /* Imagem do pílar (fica em cima no mobile): 100% sem radius interno */ html.ds .section-pilares-2, html.ds [class*="section-pilares-2-duplicate"], html.ds .section-pilares-mc-image, html.ds .section-pilares-cf-image { border-radius: 0 !important; aspect-ratio: 4 / 5 !important; width: 100% !important; padding: 0 !important; } /* 7. Foto Sobre mim: focar o rosto (sobe um pouco) */ .section-sobre-mim-image { background-position: center top !important; } /* 8. Gap entre seções padronizado em 1rem (16px) */ .margin-bottom.margin-small { margin-bottom: 1rem !important; } /* 9. Marquee: aumentar font-size do texto pra dar mais peso visual */ html.ds .regua-home .text-block-3 { font-size: 14px !important; line-height: 1.4 !important; font-weight: 400 !important; } /* 10. Régua mobile mais fina: reduzir paddings internos pra ~134px (era 167px) */ html.ds .regua-home .card.secondary { padding: 14px !important; } html.ds .regua-home .carousel-container { padding-top: 20px !important; padding-bottom: 20px !important; } /* 11. Alinhar padding do card "O problema" (laranja) com os cards 01/02/03 brancos: ambos com conteúdo a 28px da borda. Zera padding outer e força inner sesh4 a 36px pra dar mais respiro (era 28) */ html.ds .card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)) { padding: 0 !important; } html.ds .card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)) > .sesh4 { padding: 36px 28px !important; display: flex !important; flex-direction: column !important; gap: 18px !important; } /* 12. Badge "O problema" (texto na box branca): centralizar texto verticalmente usando inline-flex + line-height 1 (eliminava offset visual do inline-block) */ html.ds .card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)) .text-block-4 { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding: 8px 14px !important; } /* 13.0 Padronizar TODOS os pilares (PU/MC/CF) no mobile: IMAGEM em cima, TEXTO embaixo. MC já tem essa ordem no DOM; PU e CF têm texto antes — usar `order` no card que contém a imagem pra subi-lo na ordem visual */ html.ds .pilares-sections-grid > .card.secondary:has([class*="section-pilares-2"]) { order: -1 !important; } /* 13. Card "PU, MC & CF" (Pilares header): inverter pra fundo branco, sem box dentro de box. Badge fica com outline preto (igual o restante do design system) */ html.ds .card.secondary:has(.section-pilares-badge) { background-color: #fff !important; background: #fff !important; padding: 0 !important; } html.ds .card.secondary:has(.section-pilares-badge) .sesh4.section-pilares { background-color: transparent !important; background: transparent !important; border-radius: 0 !important; padding: 36px 28px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 18px !important; } html.ds .card.secondary:has(.section-pilares-badge) .section-pilares-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: transparent !important; background: transparent !important; color: #000 !important; border: 1.5px solid #000 !important; line-height: 1 !important; padding: 8px 14px !important; border-radius: 999px !important; } html.ds .card.secondary:has(.section-pilares-badge) .heading { color: #000 !important; } /* 14.-1 Card Typeform: remover borda preta outer (estava bg #000 + padding 24px) */ html.ds .card.secondary.typeform-card { background-color: transparent !important; background: transparent !important; padding: 0 !important; } /* 14.0 Card "FAQ" header (Antes de começarmos): remover borda preta outer e padronizar padding pra 36px vertical / 28px lateral. Card fica laranja unificado, badge mantém pílula branca como o "O problema" */ html.ds .card.secondary:has(.section-faq-badge), html.ds .card.secondary:has(.section-faq) { background-color: #FF3300 !important; background: #FF3300 !important; padding: 0 !important; } html.ds .card.secondary:has(.section-faq-badge) .sesh4, html.ds .card.secondary:has(.section-faq) .sesh4 { background-color: transparent !important; background: transparent !important; border-radius: 0 !important; padding: 36px 28px !important; } html.ds .card.secondary:has(.section-faq-badge) .section-faq-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #fff !important; color: #000 !important; line-height: 1 !important; padding: 8px 14px !important; border-radius: 999px !important; } /* 14. Card "Metodologia" descritivo: mesmo padrão do "PU, MC & CF" — fundo branco, sem box dentro de box, badge com outline preto */ html.ds .card.secondary:has(.section-metodologia-badge), html.ds .card.secondary:has(.section-metodologia) { background-color: #fff !important; background: #fff !important; padding: 0 !important; } html.ds .card.secondary:has(.section-metodologia-badge) .sesh4, html.ds .card.secondary:has(.section-metodologia) .sesh4 { background-color: transparent !important; background: transparent !important; border-radius: 0 !important; padding: 36px 28px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 18px !important; } html.ds .card.secondary:has(.section-metodologia-badge) .section-metodologia-badge, html.ds .card.secondary:has(.section-metodologia) .section-metodologia-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: transparent !important; background: transparent !important; color: #000 !important; border: 1.5px solid #000 !important; line-height: 1 !important; padding: 8px 14px !important; border-radius: 999px !important; } html.ds .card.secondary:has(.section-metodologia-badge) .heading, html.ds .card.secondary:has(.section-metodologia) .heading, html.ds .card.secondary:has(.section-metodologia) .section-metodologia-heading { color: #000 !important; } } /* Card 04 da metodologia (CONSTRUÇÃO) tem fundo laranja — texto descritivo precisa ser branco pra contrastar (estava cinza-escuro = ilegível) */ html.ds .metodologia-card-04 .metodologia-description, html.ds .metodologia-card-04 .metodologia-text-04, html.ds .metodologia-card-04 .text-size-medium, html.ds .metodologia-card-04 .text-color-muted, html.ds .metodologia-card-04 p, html.ds .metodologia-card-04 .service-content-bottom * { color: #fff !important; } /* ============================================ PATCHES — Cards "ocos" Problema e Metodologia (DESKTOP) Cards têm altura forçada (578px/680px). Textos pequenos demais deixavam muito espaço vazio. Aumentar a tipografia pra preencher. Não mexer no mobile (já calibrado em @media max-width: 767px). ============================================ */ @media (min-width: 768px) { /* Layout flex natural: número no topo, conteúdo no rodapé, com fluxo em vez de absolute positioning (que causava sobreposição com tipografia maior). */ html.ds .home-services-grid .service-card, html.ds .metodologia-card { overflow: visible !important; gap: 1.5rem !important; } html.ds .home-services-grid .service-card .service-item-number, html.ds .metodologia-card .service-item-number, html.ds .metodologia-card .service-item-number.metodologia-number-04 { position: static !important; top: auto !important; left: auto !important; } html.ds .home-services-grid .service-card .service-content-bottom, html.ds .metodologia-card .service-content-bottom { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; max-width: 100% !important; } /* Subtítulo uppercase — Problema e Metodologia (tamanho com respiro) */ html.ds .home-services-grid .service-card .service-item-title, html.ds .home-services-grid .service-card h2.service-item-title, html.ds .metodologia-card .service-item-title, html.ds .metodologia-card h2.service-item-title { font-size: clamp(18px, 1.45vw, 21px) !important; line-height: 1.2 !important; margin-bottom: 1rem !important; } /* Texto descritivo dos cards do Problema — leve aumento (18 → 20px) mantendo respiros */ html.ds .home-services-grid .service-card .service-content-bottom .text-size-medium, html.ds .home-services-grid .service-card .text-size-medium.text-color-muted { font-size: clamp(17px, 1.35vw, 20px) !important; line-height: 1.55 !important; } /* Texto descritivo dos cards da Metodologia — leve aumento (19 → 22px) mantendo respiros */ html.ds .metodologia-card .metodologia-description, html.ds .metodologia-card .text-size-medium.metodologia-description { font-size: clamp(18px, 1.5vw, 22px) !important; line-height: 1.6 !important; } /* Número 01/02/03/04 — proporção próxima do original com leve aumento */ html.ds .home-services-grid .service-card .service-item-number, html.ds .metodologia-card .service-item-number, html.ds .metodologia-card .service-item-number.metodologia-number-04 { font-size: clamp(60px, 4.8vw, 76px) !important; line-height: 1 !important; } /* Título do painel lateral preto (Depois disso...) — caixa baixa (Webflow original) */ html.ds .metodologia-single-card-title, html.ds .service-item-title.metodologia-single-card-title { font-size: clamp(22px, 1.8vw, 28px) !important; line-height: 1.2 !important; letter-spacing: 0.02em !important; } } /* Respeita preferência de reduzir movimento do sistema operacional */ @media (prefers-reduced-motion: reduce) { html.ds .reveal, html.ds .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } html.ds .hero-button:hover, html.ds .button.primary:hover, html.ds .service-bottom-button:hover, html.ds .service-card:hover, html.ds .faq-card:hover, html.ds .metodologia-card:hover, html.ds .footer-social-card:hover { transform: none !important; } } /* ============================================ CTA FLUTUANTE MOBILE — bolinha laranja Aparece apenas no mobile, depois de rolar o hero Esconde ao chegar no formulário ============================================ */ html.ds .fab-cta { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background: #ff3300; color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(255, 51, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15); z-index: 9999; text-decoration: none; transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease; opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.9); -webkit-tap-highlight-color: transparent; } html.ds .fab-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } html.ds .fab-cta:active { transform: translateY(0) scale(0.92); } html.ds .fab-cta svg { display: block; } @media (max-width: 767px) { html.ds .fab-cta { display: flex; } } @media (prefers-reduced-motion: reduce) { html.ds .fab-cta { transition: opacity 0.2s ease; transform: none; } html.ds .fab-cta.is-visible { transform: none; } }