/** * ================================================================ * AGÊNCIA 2E — TRAFEGO-PAGO.CSS v2.0 * Redesign completo das seções 1–4 + CTA Final * CSS não-crítico carregado de forma assíncrona * Critical CSS (hero above-the-fold) está inline no * * ORGANIZAÇÃO: * 1. Utilitários globais e botões * 2. Container e layout base * 3. Seção 1 — Dor dos Dados (split assimétrico + imagem) * 4. Seção 2 — Server-Side Tracking (cards elevados + numerais) * 5. Seção 3 — Multicanal Z-Pattern (blocos alternados) * 6. Seção 4 — Jeito 2e (blockquote maximalista + grid irregular) * 7. Seção CTA Final (dois blocos + decorativo SVG) * 8. Placeholders de imagem (padrão visual da Agência 2e) * 9. Popup / Modal * 10. Animações e micro-interações * 11. Media queries (tablet 768px / desktop 1024px) * * Removidos (já em arquivos globais): * footer → assets/css/footer.css * header → assets/css/header.css * ================================================================ */ /* ================================================================ 1. UTILITÁRIOS GLOBAIS E BOTÕES ================================================================ */ .text-center { text-align: center; } /* H2 padrão de seção */ .section-h2 { font-size: 22px; font-weight: 800; line-height: 1.22; color: var(--branco); margin-bottom: 16px; } /* Parágrafo introdutório */ .section-p { font-size: 15px; color: var(--cinza-medio); line-height: 1.65; margin-bottom: 32px; } /* ------------------------------------------ Botão primário — gradiente roxo ------------------------------------------ */ .btn-primary { display: inline-block; background: linear-gradient(135deg, var(--roxo-primario), var(--roxo-escuro)); color: var(--branco); border: none; padding: 14px 32px; font-size: 14px; font-weight: 700; border-radius: 8px; cursor: pointer; font-family: 'Montserrat', sans-serif; text-align: center; text-decoration: none; letter-spacing: 0.02em; transition: all 0.3s ease; box-shadow: 0 0 24px rgba(124, 58, 237, 0.35); position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: left 0.5s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(124, 58, 237, 0.55); } /* ------------------------------------------ Botão secundário — outline roxo ------------------------------------------ */ .btn-secondary { display: inline-block; background: transparent; color: var(--roxo-neon); border: 1px solid var(--borda-media); padding: 12px 26px; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; font-family: 'Montserrat', sans-serif; text-align: center; text-decoration: none; transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease; } .btn-secondary:hover { background: var(--roxo-glass); border-color: var(--roxo-neon); transform: translateY(-1px); } /* ================================================================ 2. CONTAINER E LAYOUT BASE ================================================================ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Espaçamento padrão das seções */ section { padding: 64px 0; } /* ================================================================ 3. SEÇÃO 1 — DOR DOS DADOS PERDIDOS Layout: split assimétrico, texto 2fr / imagem 1fr Número fantasma como textura decorativa no bloco de texto ================================================================ */ .dor-dados { background: var(--preto); border-top: 2px solid var(--laranja-fl); /* Acento laranja na entrada */ } /* Grid split: coluna única no mobile → 2fr 1fr no desktop */ .dor-split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } /* Coluna de texto — posição relativa para o número fantasma */ .dor-texto { position: relative; z-index: 1; } /* Número fantasma decorativo — fica atrás do texto */ .dor-numero-fantasma { position: absolute; top: -20px; left: -12px; font-size: 96px; font-weight: 900; line-height: 1; color: var(--laranja-fl); opacity: 0.07; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap; letter-spacing: -4px; } /* Garante que o conteúdo de texto fique acima do número fantasma */ .dor-texto .section-h2, .dor-texto .section-p, .dor-texto .dor-destaque, .dor-texto .dor-cta-wrap { position: relative; z-index: 1; } /* Box de destaque — borda esquerda laranja */ .dor-destaque { display: flex; gap: 14px; align-items: flex-start; background: rgba(224, 112, 64, 0.07); border: 1px solid var(--borda-laranja); border-left: 3px solid var(--laranja-fl); border-radius: 10px; padding: 20px 22px; margin-bottom: 28px; } .destaque-icon { color: var(--laranja-fl); flex-shrink: 0; margin-top: 2px; } .destaque-texto { font-size: 15px; font-weight: 600; color: var(--branco); line-height: 1.6; margin: 0; } /* Wrapper do CTA inline */ .dor-cta-wrap { margin-top: 4px; } /* Coluna da imagem */ .dor-imagem-col { display: flex; align-items: center; justify-content: center; } .img-dash { border-radius: 12px; width: 100%; height: auto; transition: transform 0.3s ease; } .img-dash:hover { transform: perspective(1000px) rotateY(10deg); } /* ================================================================ 4. SEÇÃO 2 — SERVER-SIDE TRACKING Numerais ordinais como textura de fundo nos cards Card central (Blindagem) elevado com margin-top negativo Linha conectora horizontal entre os cards no desktop ================================================================ */ .server-side { background: var(--preto-secundario); border-top: 1px solid var(--borda-sutil); border-bottom: 1px solid var(--borda-sutil); /* Entrada com clip-path diagonal suave */ clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%); padding-top: 88px; /* Compensa o clip-path */ } /* Intro — largura controlada */ .server-intro { max-width: 820px; margin: 0 auto 16px; } /* Wrapper — posição relativa para a linha conectora */ .beneficios-wrapper { position: relative; } /* Linha conectora — escondida no mobile, visível no desktop via media query */ .beneficios-conector { display: none; } /* Grid dos 3 cards — coluna única no mobile */ .beneficios-grid { display: grid; grid-template-columns: 1fr; gap: 24px; position: relative; z-index: 1; margin-top: 100px; /* Espaço para a linha conectora no desktop */ } /* Card base */ .beneficio-card { background: var(--preto-card); border: 1px solid var(--borda-sutil); border-radius: 16px; padding: 28px 22px 24px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Numeral ordinal decorativo — textura de fundo no card */ .card-numeral { position: absolute; bottom: 10px; right: 16px; font-size: 80px; font-weight: 900; line-height: 1; color: var(--laranja-fl); opacity: 0.07; pointer-events: none; user-select: none; letter-spacing: -3px; } /* Linha de brilho animada no topo do card ao hover */ .beneficio-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--laranja-fl), transparent); transition: left 0.6s ease; } .beneficio-card:hover::before { left: 100%; } .beneficio-card:hover { border-color: var(--borda-laranja); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(224, 112, 64, 0.12); } /* Card em destaque — Blindagem de Dados */ .beneficio-card--destaque { border-color: var(--borda-laranja); box-shadow: 0 0 32px rgba(224, 112, 64, 0.12); } /* Badge "Diferencial Técnico" */ .beneficio-badge { position: absolute; top: 16px; right: 16px; background: linear-gradient(135deg, var(--laranja-fl), var(--laranja-escuro)); color: var(--branco); font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase; } /* Ícone do card */ .beneficio-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; flex-shrink: 0; } /* Paleta de ícones */ .beneficio-icon--laranja { background: var(--laranja-glass); color: var(--laranja-fl); } .beneficio-icon--roxo { background: var(--roxo-glass); color: var(--roxo-neon); } .beneficio-icon--amarelo{ background: rgba(186, 117, 23, 0.15); color: #EF9F27; } /* Label acima do H3 */ .beneficio-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza-medio); margin-bottom: 8px; } /* Título do card */ .beneficio-card h3 { font-size: 20px; font-weight: 700; color: var(--branco); margin-bottom: 10px; line-height: 1.3; } /* Texto descritivo */ .beneficio-card p { font-size: 14px; color: var(--cinza-claro); line-height: 1.65; opacity: 0.82; flex: 1; margin: 0; } /* ============================================================ 6. SEÇÃO PROVA SOCIAL ============================================================ */ .prova-social { background: var(--preto); } .depoimentos-grid { display: grid; grid-template-columns: 1fr; gap: 40px; text-align: center; max-width: 1200px; /* Garante que o grid não estique infinitamente */ margin: 0 auto; /* Centraliza o container na página */ } .depoimento-card { border-radius: 12px; transition: transform 0.3s ease; } .depoimento-card:hover { border-color: var(--borda-media); transform: perspective(1000px) rotateY(10deg); } .depoimento-card img { border-radius: 10px; max-width: 100%; height: auto; display: block; margin: 0 auto; } .depoimento-card img:hover { border-radius: 10px; max-width: 100%; height: auto; display: block; margin: 0 auto; box-shadow: 1px 1px 15px rgba(129, 10, 241, 0.762); /* Borda branca para destacar a imagem */ } .depoimento-texto { font-size: 14px; font-style: italic; color: var(--cinza-claro); line-height: 1.6; margin-bottom: 12px; opacity: 0.85; } .depoimento-autor { font-size: 12px; font-weight: 600; color: var(--roxo-neon); margin: 0; } /* ================================================================ 5. SEÇÃO 3 — MULTICANAL Z-PATTERN 3 blocos empilhados alternando visual ↔ conteúdo Placeholder de imagem no bloco Meta Ads ================================================================ */ .multicanal { background: var(--preto); border-top: 1px solid var(--borda-sutil); } /* Intro centralizado */ .multicanal-intro { max-width: 820px; margin: 0 auto; } /* Wrapper dos blocos Z-Pattern */ .canais-zpattern { display: flex; flex-direction: column; gap: 2px; /* Divisor mínimo entre blocos */ } /* Bloco base — coluna única no mobile */ .canal-bloco { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 36px 28px; border: 1px solid var(--borda-sutil); border-radius: 16px; background: var(--preto-card); position: relative; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; margin: 50px 0; /* Espaço entre blocos no mobile */ } .canal-bloco:hover { border-color: var(--borda-laranja); box-shadow: 0 8px 32px rgba(224, 112, 64, 0.08); } /* Bloco Meta Ads — fundo levemente diferenciado */ .canal-bloco--roxo { background: rgba(26, 9, 51, 0.85); border-color: var(--borda-media); } .canal-bloco--roxo:hover { border-color: var(--roxo-neon); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.1); } /* Bloco Remarketing — borda verde */ .canal-bloco--verde { border-color: rgba(29, 158, 117, 0.2); } .canal-bloco--verde:hover { border-color: rgba(29, 158, 117, 0.5); box-shadow: 0 8px 32px rgba(29, 158, 117, 0.08); } /* Wrapper visual (ícone + label) */ .canal-bloco-visual { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } /* Ícone grande do bloco */ .canal-icon-grande { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .canal-icon-grande--laranja { background: var(--laranja-glass); color: var(--laranja-fl); box-shadow: 0 0 24px rgba(224, 112, 64, 0.15); } .canal-icon-grande--verde { background: rgba(29, 158, 117, 0.12); color: var(--verde-rmkt); box-shadow: 0 0 24px rgba(29, 158, 117, 0.12); } /* Label do bloco (GOOGLE ADS / META ADS / REMARKETING) */ .canal-bloco-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--laranja-fl); } .canal-bloco-label--roxo { color: var(--roxo-neon); } .canal-bloco-label--verde { color: var(--verde-rmkt); } /* Conteúdo do bloco */ .canal-bloco-conteudo { position: relative; } /* Badge flutuante no bloco Meta Ads */ .canal-badge-flutuante { display: inline-block; background: linear-gradient(135deg, var(--roxo-primario), var(--roxo-escuro)); color: var(--branco); font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; } /* H3 do bloco */ .canal-bloco h3 { font-size: 20px; font-weight: 700; color: var(--branco); margin-bottom: 12px; line-height: 1.25; } /* Parágrafo do bloco */ .canal-bloco p { font-size: 14px; color: var(--cinza-claro); line-height: 1.65; opacity: 0.85; margin-bottom: 16px; } /* Tag solta no rodapé do conteúdo — identidade por canal */ .canal-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 0; border-bottom: 1px solid transparent; } .canal-tag--laranja { color: var(--laranja-fl); border-bottom-color: rgba(224, 112, 64, 0.3); } .canal-tag--roxo { color: var(--roxo-neon); border-bottom-color: rgba(167, 139, 250, 0.3); } .canal-tag--verde { color: var(--verde-rmkt); border-bottom-color: rgba(29, 158, 117, 0.3); } /* CTA inline abaixo dos blocos */ .multicanal-cta-wrap { text-align: center; margin-top: 40px; } .img-feed{ border-radius: 12px; width: 100%; height: auto; transition: transform 0.3s ease; } .img-feed:hover { transform: perspective(1000px) rotateY(-10deg); } /* ================================================================ 6. SEÇÃO 4 — O JEITO 2E DE FAZER PERFORMANCE Blockquote maximalista com aspas 120px posição absoluta Grid irregular: DIF1 = 2 colunas | DIF2 = 1 col | DIF3 = full Placeholder #3 como background semitransparente ================================================================ */ .jeito-2e { background: var(--preto-secundario); border-top: 1px solid var(--borda-sutil); border-bottom: 1px solid var(--borda-sutil); position: relative; overflow: hidden; } /* Placeholder de background — posição absoluta, cobrindo a seção */ .jeito-bg-placeholder { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Conteúdo interno acima do background */ .jeito-2e .container { position: relative; z-index: 1; } /* Wrapper centralizado */ .jeito-inner { max-width: 900px; margin: 0 auto; } /* Blockquote maximalista */ .frase-impacto { position: relative; background: rgba(224, 112, 64, 0.05); border: 1px solid var(--borda-laranja); border-radius: 16px; padding: 40px 48px 36px; margin: 0 0 50px; font-size: 18px; font-weight: 700; color: var(--branco); line-height: 1.55; font-style: italic; text-align: center; overflow: visible; } /* Aspas decorativas — posição absoluta, bem grandes */ .aspas { font-size: 120px; line-height: 0.7; color: var(--laranja-fl); opacity: 0.35; font-style: normal; pointer-events: none; user-select: none; } .aspas--abre { position: absolute; top: -8px; left: 12px; } .aspas--fecha { position: absolute; bottom: -20px; right: 12px; } /* Grid irregular dos diferenciais — coluna única no mobile */ .diferenciais-grid { display: grid; grid-template-columns: 1fr; gap: 60px; } /* Item diferencial — base */ .dif-item { display: flex; gap: 16px; align-items: flex-start; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--borda-sutil); border-radius: 12px; padding: 20px 22px; transition: border-color 0.3s ease, background 0.3s ease; } .dif-item:hover { border-color: var(--borda-laranja); background: rgba(224, 112, 64, 0.04); } /* Ícone emoji */ .dif-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; } /* Corpo do diferencial */ .dif-corpo strong { display: block; font-size: 15px; font-weight: 700; color: var(--branco); margin-bottom: 6px; } .dif-corpo p { font-size: 13px; color: var(--cinza-claro); line-height: 1.6; opacity: 0.82; margin: 0; } /* ================================================================ 7. SEÇÃO CTA FINAL Layout: dois blocos lado a lado no desktop Borda superior laranja de identidade Elemento decorativo SVG com linhas diagonais ================================================================ */ .cta-final { background: var(--preto); border-top: 2px solid var(--laranja-fl); /* Acento laranja — espelha Seção 1 */ position: relative; overflow: hidden; } /* Elemento decorativo SVG — canto inferior direito */ .cta-deco { position: absolute; bottom: -10px; right: -10px; width: 220px; height: 220px; pointer-events: none; z-index: 0; } /* Conteúdo interno acima do decorativo */ .cta-final .container { position: relative; z-index: 1; } /* Inner: coluna única no mobile → dois blocos no desktop */ .cta-final-inner { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } /* Título com gradiente branco → laranja */ .cta-final-texto h2 { font-size: 26px; font-weight: 800; line-height: 1.2; margin-bottom: 16px; background: linear-gradient(135deg, var(--branco) 0%, var(--laranja-claro) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cta-final-texto p { font-size: 15px; color: var(--cinza-claro); line-height: 1.65; opacity: 0.85; margin: 0; } /* Bloco de ação — centralizado no mobile */ .cta-final-acao { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } /* Sub-texto abaixo do botão */ .cta-garantia { font-size: 12px; color: var(--cinza-medio); opacity: 0.7; } /* ================================================================ 8. PLACEHOLDERS DE IMAGEM Padrão visual Agência 2e: Fundo: --preto-card | Borda: dashed roxo-neon | Label descritivo ================================================================ */ /* Base de todos os placeholders */ .img-placeholder { background: var(--preto-card); border-radius: 12px; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 220px; transition: border-color 0.3s ease; } .img-placeholder:hover { border-color: var(--roxo-neon); } /* Placeholder vertical — Seção 1 */ /* .img-placeholder { aspect-ratio: 4 / 3; } */ /* Placeholder horizontal — Meta Ads, Seção 3 */ .img-placeholder--meta { aspect-ratio: 3 / 2; min-height: 200px; } /* Placeholder background full — Seção 4 */ .img-placeholder--bg-full { aspect-ratio: auto; min-height: 120px; border-radius: 0; border-color: transparent; opacity: 0.25; background: transparent; width: 100%; height: 100%; } /* Conteúdo interno do placeholder */ .img-placeholder-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; } /* Ícone do placeholder */ .img-ph-icon { color: var(--borda-media); opacity: 0.5; } /* Dimensão sugerida */ .img-ph-dim { font-size: 11px; font-weight: 600; color: var(--roxo-neon); opacity: 0.6; letter-spacing: 0.04em; font-family: 'Montserrat', monospace; } /* Descrição do conteúdo sugerido */ .img-ph-desc { font-size: 11px; color: var(--cinza-medio); opacity: 0.5; line-height: 1.5; } /* Inner do placeholder de background */ .img-placeholder-inner--bg { padding: 28px; } /* ================================================================ 9. POPUP / MODAL position: fixed; inset: 0; z-index: 9999 — obrigatório ================================================================ */ /* Overlay — cobre a tela inteira */ .popup-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .popup-overlay.active { opacity: 1; visibility: visible; } /* Card do popup */ .popup-content { background: var(--preto-card); border: 1px solid var(--borda-media); border-radius: 16px; padding: 32px 28px 28px; width: 100%; max-width: 420px; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(124, 58, 237, 0.2); transform: translateY(20px); transition: transform 0.3s ease; } .popup-overlay.active .popup-content { transform: translateY(0); } /* Botão fechar (X) */ .popup-close { position: absolute; top: 14px; right: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--borda-sutil); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--cinza-medio); font-size: 14px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; line-height: 1; } .popup-close:hover { background: rgba(124, 58, 237, 0.15); color: var(--branco); } /* Título e subtítulo */ .popup-content h3 { font-size: 20px; font-weight: 700; color: var(--branco); margin-bottom: 6px; padding-right: 36px; } .popup-subtitle { font-size: 13px; color: var(--cinza-medio); margin-bottom: 22px; line-height: 1.5; } /* ================================================================ 11. ANIMAÇÕES E MICRO-INTERAÇÕES Entrada suave (controlada pelo IntersectionObserver no main.js) ================================================================ */ /* Estado inicial — invisível e deslocado para baixo */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } /* Estado ativado — visível */ .fade-in.visible { opacity: 1; transform: translateY(0); } /* Delay escalonado — cards de benefícios */ .beneficio-card:nth-child(1) { transition-delay: 0s; } .beneficio-card:nth-child(2) { transition-delay: 0.12s; } .beneficio-card:nth-child(3) { transition-delay: 0.24s; } /* Delay escalonado — blocos Z-Pattern */ .canal-bloco:nth-child(1) { transition-delay: 0s; } .canal-bloco:nth-child(2) { transition-delay: 0.1s; } .canal-bloco:nth-child(3) { transition-delay: 0.2s; } /* Delay escalonado — diferenciais */ .dif-item:nth-child(1) { transition-delay: 0s; } .dif-item:nth-child(2) { transition-delay: 0.08s; } .dif-item:nth-child(3) { transition-delay: 0.16s; } /* ================================================================ 12. MEDIA QUERIES Mobile-first: regras base acima são para mobile Expandindo para tablet (768px) e desktop (1024px) ================================================================ */ /* ------- TABLET (768px+) ------- */ @media (min-width: 768px) { /* H2 maior */ .section-h2 { font-size: 28px; } /* --- Seção 1: split ativo --- */ .dor-split { grid-template-columns: 2fr 1fr; gap: 48px; align-items: center; } /* --- Seção 2: 3 colunas --- */ .beneficios-grid { grid-template-columns: repeat(3, 1fr); gap: 45px; align-items: start; /* Necessário para o card central elevar */ } /* Prova social: 3 depoimentos em linha */ .depoimentos-grid { grid-template-columns: repeat(3, 1fr); } /* Card central elevado — efeito de destaque flutuante */ .beneficio-card--destaque { margin-top: -28px; padding: 36px 26px 32px; } /* Linha conectora horizontal entre os cards */ .beneficios-conector { display: block; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, var(--borda-laranja) 20%, var(--borda-laranja) 80%, transparent 95%); z-index: 0; transform: translateY(-50%); } /* --- Seção 3: blocos em 2 colunas (visual + conteúdo) --- */ .canal-bloco { grid-template-columns: auto 1fr; gap: 32px; } /* Bloco invertido: conteúdo esquerda / visual direita */ .canal-bloco--invertido { grid-template-columns: 1fr auto; } /* No bloco invertido, o visual vai para a segunda posição */ .canal-bloco--invertido .canal-bloco-visual { order: 2; } .canal-bloco--invertido .canal-bloco-conteudo { order: 1; } /* Visual do bloco: alinhamento central */ .canal-bloco-visual { align-items: center; min-width: 120px; } /* --- Seção 4: grid irregular ativo --- */ .diferenciais-grid { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 16px; } /* DIF 1 ocupa 2 colunas */ .dif-item--wide { grid-column: 1 / 2; } /* DIF 2 ocupa a coluna direita */ .dif-item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; } /* DIF 3 ocupa largura total */ .dif-item--full { grid-column: 1 / -1; } /* --- CTA Final: dois blocos lado a lado --- */ .cta-final-inner { grid-template-columns: 1fr 1fr; gap: 60px; } /* Ação alinhada à direita no desktop */ .cta-final-acao { align-items: flex-start; text-align: left; } /* --- Footer: 3 colunas --- */ .footer-grid--3col { grid-template-columns: 1.4fr 1fr 1.2fr; } .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } } /* ------- DESKTOP (1024px+) ------- */ @media (min-width: 1024px) { /* H2 maior */ .section-h2 { font-size: 32px; } /* Seções com mais espaço vertical */ section { padding: 88px 0; } /* Compensa o clip-path da Seção 2 */ .server-side { padding-top: 110px; } /* Blockquote maior */ .frase-impacto { font-size: 22px; padding: 48px 64px 44px; } .diferenciais-grid { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 50px; } /* CTA final: título maior */ .cta-final-texto h2 { font-size: 34px; } /* Botão CTA final: maior no desktop */ .cta-final-acao .btn-primary { padding: 18px 48px; font-size: 15px; box-shadow: 0 0 40px rgba(124, 58, 237, 0.4); } /* Bloco Meta Ads: imagem com tamanho definido */ .canal-bloco { min-width: 280px; gap: 60px; } /* --- Seção 1: split ativo --- */ .dor-split { grid-template-columns: 2fr 1.3fr; gap: 80px; align-items: center; } } /* ============================================================ SEÇÃO FAQ (Objeções de Tráfego Pago) — accordion nativo ============================================================ */ .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 40px auto 0; } .faq-item { background: rgba(124, 58, 237, 0.05); border: 1px solid var(--borda-sutil); border-radius: 10px; padding: 4px 20px; transition: border-color 0.2s ease; } .faq-item[open] { border-color: var(--borda-media); } .faq-item summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: 15px; font-weight: 700; color: var(--branco); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; flex-shrink: 0; font-size: 20px; font-weight: 400; color: var(--laranja-fl); transition: transform 0.25s ease; } .faq-item[open] summary::after { content: '–'; } .faq-answer { padding: 0 0 18px; } .faq-answer p { font-size: 14px; color: var(--cinza-claro); opacity: 0.85; line-height: 1.65; } .faq-answer p + .faq-steps { margin-top: 10px; } .faq-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .faq-steps li { font-size: 14px; color: var(--cinza-claro); opacity: 0.85; line-height: 1.5; }