/** * AGÊNCIA 2E — GOOGLE-MEU-NEGOCIO.CSS v1.1 * Renomeado de local-presence.css → google-meu-negocio.css * CSS não-crítico carregado de forma assíncrona * O Critical CSS (hero above-the-fold) está inline no do google-meu-negocio.html * * ORGANIZAÇÃO: * 1. Utilitários globais (reutilizados da Home) * 2. Container e layout base * 3. Seção DNA Geográfico (cards de auditoria) * 4. Seção Hub de Reputação + IA * 5. Seção Protocolo Técnico * 6. Seção Autoridade Local Presence * 7. Seção CTA Final * 8. Footer institucional (idêntico à Home) * 9. Popup / Modal (idêntico à Home) * 10. Animações e micro-interações * 11. Media queries (tablet 768px / desktop 1024px) */ /* ============================================================ 1. UTILITÁRIOS GLOBAIS ============================================================ */ .text-center { text-align: center; } /* H2 padrão das seções */ .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 (roxo — abaixo da dobra) */ .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) */ .btn-secondary { display: inline-block; background: transparent; color: var(--roxo-neon); border: 1px solid var(--borda-media); padding: 12px 24px; 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 DNA GEOGRÁFICO Fundo preto — contraste com o hero Grid 2×2 de cards de auditoria ============================================================ */ .dna-geo { background: var(--preto); border-top: 1px solid var(--borda-sutil); } /* Introdução da seção */ .dna-intro { margin-bottom: 48px; max-width: 760px; margin-left: auto; margin-right: auto; } /* Grid 2×2 — 1 col mobile, 2 cols desktop */ .auditoria-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } /* Card individual de auditoria */ .auditoria-card { background: var(--preto-card); border: 1px solid var(--borda-sutil); border-radius: 14px; padding: 24px 22px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } /* Linha de brilho animada no topo ao hover */ .auditoria-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--verde-gmn), transparent); transition: left 0.6s ease; } .auditoria-card:hover::before { left: 100%; } .auditoria-card:hover { border-color: var(--borda-verde); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(29, 158, 117, 0.1); } /* Ícone do card */ .auditoria-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } /* Paleta de ícones */ .auditoria-icon--verde { background: var(--verde-gmn-glass); color: var(--verde-gmn); } .auditoria-icon--roxo { background: var(--roxo-glass); color: var(--roxo-neon); } .auditoria-icon--amarelo { background: rgba(186, 117, 23, 0.15); color: #EF9F27; } .auditoria-icon--laranja { background: rgba(216, 90, 48, 0.15); color: #E07040; } /* Título do card */ .auditoria-card h3 { font-size: 20px; font-weight: 700; color: var(--branco); margin-bottom: 10px; line-height: 1.3; } /* Texto descritivo */ .auditoria-card p { font-size: 14px; color: var(--cinza-claro); line-height: 1.65; opacity: 0.82; margin: 0; } /* ============================================================ 4. SEÇÃO HUB DE REPUTAÇÃO + IA Fundo secundário (preto-secundário) — alternância visual 3 cards horizontais ============================================================ */ .hub-reputacao { background: var(--preto-secundario); border-top: 1px solid var(--borda-sutil); border-bottom: 1px solid var(--borda-sutil); } /* Grid — 1 col mobile, 3 cols desktop */ .hub-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 8px; } /* Card base do hub */ .hub-card { background: var(--preto-card); border: 1px solid var(--borda-sutil); border-radius: 16px; padding: 26px 22px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Card em destaque (Ouvidoria Digital) */ .hub-card--destaque { border-color: var(--borda-verde); box-shadow: 0 0 28px rgba(29, 158, 117, 0.1); } .hub-card:hover { border-color: var(--borda-verde); transform: translateY(-4px); box-shadow: 0 12px 36px rgba(29, 158, 117, 0.12); } /* Badge "Proteção 24h" */ .hub-badge { position: absolute; top: 16px; right: 16px; background: linear-gradient(135deg, var(--verde-gmn), #0d7a59); color: var(--branco); font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase; } /* Header do card (ícone + label) */ .hub-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } /* Ícone do hub */ .hub-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hub-icon--verde { background: var(--verde-gmn-glass); color: var(--verde-gmn); } .hub-icon--roxo { background: var(--roxo-glass); color: var(--roxo-neon); } .hub-icon--amarelo { background: rgba(186, 117, 23, 0.15); color: #EF9F27; } /* Label de categoria */ .hub-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza-medio); } /* Título */ .hub-card h3 { font-size: 20px; font-weight: 700; color: var(--branco); margin-bottom: 10px; line-height: 1.3; } /* Texto descritivo */ .hub-card p { font-size: 14px; color: var(--cinza-claro); line-height: 1.65; opacity: 0.82; flex: 1; margin-bottom: 16px; } /* Box de destaque no rodapé do card */ .hub-destaque { background: rgba(29, 158, 117, 0.07); border-left: 2px solid var(--verde-gmn); border-radius: 4px; padding: 8px 12px; margin-top: auto; } .hub-destaque span { font-size: 12px; font-weight: 600; color: var(--verde-gmn); } /* ============================================================ 4.1. 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(4, 248, 0, 0.762); } /* ============================================================ 5. SEÇÃO PROTOCOLO TÉCNICO Fundo preto — lista visual numerada ============================================================ */ .protocolo-tecnico { background: var(--preto); border-top: 1px solid var(--borda-sutil); } /* Lista de itens do protocolo */ .protocolo-lista { display: flex; flex-direction: column; gap: 35px; margin-top: 8px; } /* Item individual */ .protocolo-item { display: flex; gap: 0; align-items: stretch; position: relative; } /* Número decorativo */ .protocolo-numero { font-size: 48px; font-weight: 800; color: rgba(29, 158, 117, 0.12); line-height: 1; width: 72px; flex-shrink: 0; padding-top: 4px; text-align: center; letter-spacing: -2px; user-select: none; } /* Conteúdo do item */ .protocolo-content { display: flex; gap: 16px; align-items: flex-start; background: var(--preto-card); border: 1px solid var(--borda-sutil); border-radius: 14px; padding: 24px 22px; flex: 1; margin-bottom: 16px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .protocolo-content:hover { border-color: var(--borda-verde); box-shadow: 0 6px 24px rgba(29, 158, 117, 0.08); } /* Ícone do protocolo */ .protocolo-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--verde-gmn-glass); color: var(--verde-gmn); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Texto do item */ .protocolo-texto h3 { font-size: 20px; font-weight: 700; color: var(--branco); margin-bottom: 8px; line-height: 1.3; } .protocolo-texto p { font-size: 14px; color: var(--cinza-claro); line-height: 1.65; opacity: 0.82; margin: 0; } /* ============================================================ 6. SEÇÃO AUTORIDADE LOCAL PRESENCE Fundo secundário — bloco de autoridade centralizado ============================================================ */ .autoridade-lp { background: var(--preto-secundario); border-top: 1px solid var(--borda-sutil); border-bottom: 1px solid var(--borda-sutil); } /* Inner centralizado */ .autoridade-lp-inner { max-width: 820px; margin: 0 auto; } /* Box de destaque — padrão da Home (borda esquerda roxa) */ .autoridade-destaque { display: flex; gap: 14px; align-items: flex-start; background: rgba(29, 158, 117, 0.06); border: 1px solid var(--borda-verde); border-left: 3px solid var(--verde-gmn); border-radius: 10px; padding: 18px 20px; margin-bottom: 40px; } .destaque-icon { color: var(--verde-gmn); flex-shrink: 0; margin-top: 2px; } .destaque-texto { font-size: 14px; font-weight: 600; color: var(--branco); line-height: 1.55; margin: 0; } /* Grid de 3 diferenciais rápidos */ .diferenciais-rapidos { display: grid; grid-template-columns: 1fr; gap: 50px; } /* Item de diferencial */ .dif-rapido { display: flex; gap: 16px; align-items: flex-start; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--borda-sutil); border-radius: 10px; padding: 18px 20px; transition: border-color 0.3s ease, background 0.3s ease; } .dif-rapido:hover { border-color: var(--borda-verde); background: rgba(29, 158, 117, 0.04); } .dif-rapido-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; } .dif-rapido strong { display: block; font-size: 14px; font-weight: 700; color: var(--branco); margin-bottom: 4px; } .dif-rapido p { font-size: 13px; color: var(--cinza-claro); line-height: 1.6; opacity: 0.8; margin: 0; } /* ============================================================ 7. SEÇÃO CTA FINAL Padrão idêntico à Home — centrado, gradiente no título ============================================================ */ .cta-final { background: var(--preto); border-top: 1px solid var(--borda-sutil); } .cta-final-inner { text-align: center; max-width: 640px; margin: 0 auto; } .cta-final-inner h2 { font-size: 28px; font-weight: 800; line-height: 1.2; margin-bottom: 16px; /* Gradiente branco → verde para identidade Local Presence */ background: linear-gradient(135deg, var(--branco) 0%, #6EE7B7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cta-final-inner p { font-size: 15px; color: var(--cinza-claro); line-height: 1.65; opacity: 0.85; margin-bottom: 32px; } /* ============================================================ 8. POPUP / MODAL — idêntico à Home ============================================================ */ .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; } .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); } .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); } .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; } /* form-group e cta-button do popup compartilham os estilos do critical CSS */ /* ============================================================ NOVOS LAYOUTS — REDESIGN ABAIXO DA DOBRA ============================================================ */ /* --- Seção 1: DNA Geo — split layout --- */ .dna-split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } .dna-split .dna-intro { margin-bottom: 0; margin-left: 0; margin-right: 0; max-width: 100%; } /* --- Seção 2: Hub Reputação — split com imagem --- */ .hub-split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .hub-imagem { border-radius: 16px; overflow: hidden; border: 1px solid var(--borda-verde); } .hub-img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.3s ease; } .hub-img:hover{ transform: perspective(1000px) rotateY(10deg); } /* Grid de cards dentro do hub-split vira coluna única no mobile */ .hub-split .hub-grid { grid-template-columns: 1fr; margin-top: 0; } /* --- Seção 3: Protocolo — imagem entre os itens --- */ .protocolo-imagem { border-radius: 14px; overflow: hidden; border: 1px solid var(--borda-verde); margin: 8px 0 8px 72px; /* alinha com o conteúdo, respeitando a largura do número decorativo */ } .protocolo-img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.3s ease; } .protocolo-img:hover { transform: perspective(1000px) rotateY(-10deg); } /* --- Seção 4: Autoridade — split com imagem à direita --- */ .autoridade-lp-split { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } .autoridade-lp-split .autoridade-lp-inner { max-width: 100%; margin: 0; } .autoridade-img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 30px; transition: transform 0.3s ease;} .autoridade-img:hover { transform:translateY(-10px) } /* --- Seção 5: Depoimentos GMN — copiada da Home --- */ .prova-social-gmn { background: #2a2a2b; } .reviews-container { padding-bottom: 48px; } .reviews-grid { display: grid; gap: 50px; padding: 10px; max-width: 1200px; margin: 0 auto; grid-template-columns: 1fr; } .review-card { background-color: var(--preto-card); border-radius: 12px; padding: 24px; color: var(--branco); box-shadow: 0 4px 20px rgba(0,0,0,0.4); font-family: 'Montserrat', sans-serif; transition: transform 0.2s ease; } .review-card:hover { transform: translateY(-3px); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .user-info { display: flex; gap: 14px; align-items: center; } .user-avatar-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--roxo-primario); } .user-details .user-name { display: block; font-weight: 700; font-size: 1.05rem; } .platform-logo img { width: 28px; height: 28px; } .stars { color: #f7cc53; font-size: 1.25rem; margin-bottom: 18px; } .review-text { line-height: 1.6; font-size: 0.9rem; font-weight: 100; margin: 0; color: #eeeeee; } /* ============================================================ 10. ANIMAÇÕES E MICRO-INTERAÇÕES ============================================================ */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Delay escalonado — cards de auditoria */ .auditoria-card:nth-child(1) { transition-delay: 0s; } .auditoria-card:nth-child(2) { transition-delay: 0.08s; } .auditoria-card:nth-child(3) { transition-delay: 0.16s; } .auditoria-card:nth-child(4) { transition-delay: 0.24s; } /* Delay escalonado — cards do hub */ .hub-card:nth-child(1) { transition-delay: 0s; } .hub-card:nth-child(2) { transition-delay: 0.1s; } .hub-card:nth-child(3) { transition-delay: 0.2s; } /* Delay escalonado — itens do protocolo */ .protocolo-item:nth-child(1) .protocolo-content { transition-delay: 0s; } .protocolo-item:nth-child(2) .protocolo-content { transition-delay: 0.1s; } .protocolo-item:nth-child(3) .protocolo-content { transition-delay: 0.2s; } /* ============================================================ 11. MEDIA QUERIES Mobile-first: regras base acima são para mobile Expandindo para tablet (768px) e desktop (1024px) ============================================================ */ /* ------- TABLET (768px+) ------- */ @media (min-width: 768px) { .section-h2 { font-size: 28px; } /* DNA Geográfico: split layout — texto | grid */ .dna-split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } /* DNA Geográfico: 2 colunas no grid interno */ .auditoria-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } /* Hub: split — imagem | cards */ .hub-split { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 80px; } /* Hub: cards voltam a empilhar verticalmente dentro da coluna */ .hub-split .hub-grid { grid-template-columns: 1fr; gap: 40px; } /* Protocolo: número decorativo visível */ .protocolo-item { gap: 0; } /* Autoridade: split — texto | imagem */ .autoridade-lp-split { grid-template-columns: 1.8fr 1fr; gap: 56px; } /* Reviews: 3 colunas */ .reviews-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } /* Diferenciais rápidos: 3 colunas */ .diferenciais-rapidos { grid-template-columns: repeat(3, 1fr); } /* 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) { .section-h2 { font-size: 32px; } section { padding: 88px 0; } .cta-final-inner h2 { font-size: 36px; } .protocolo-content{ padding: 40px; } .protocolo-lista{ gap: 40px; } /* Protocolo: número decorativo com mais presença */ .protocolo-numero { font-size: 64px; width: 88px; } /* Prova social: 4 depoimentos em linha */ .depoimentos-grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ SEÇÃO FAQ (Objeções de Gestão de GMN) — 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(--verde-gmn); 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; }