/* =================================================== VERTICEAN — Estilos Compartilhados =================================================== */ /* Fontes carregadas no de cada página (preconnect) para acelerar o render */ :root { /* Paleta Branding Verticean */ --bg-dark: #0B1622; /* Azul Profundo escurecido */ --bg-surface: #0F1E30; /* Superfície levemente mais clara */ --bg-card: #162438; /* Cards — derivado do Azul Profundo */ --bg-card-hover: #1C2D44; --border: #1E3A5F40; /* Azul Profundo com transparência */ --border-light: #1E3A5F80; --blue-primary: #1E3A5F; /* Azul Profundo — cor primária da marca */ --blue-mid: #254873; --blue-light: #3A6491; --gold: #C8922A; /* Âmbar — cor de destaque oficial */ --gold-light: #E0A83C; --gold-dim: #7A5518; --gold-bg: rgba(200, 146, 42, 0.08); --ivory: #F5F0E8; /* Marfim — neutro da marca */ --white: #F5F0E8; /* Marfim como branco principal */ --gray-100: #EDE8DF; --gray-300: #C8C0B0; --gray-400: #A09080; --gray-500: #6B7280; /* Cinza oficial */ --gray-600: #4A5260; --graphite: #2D3748; /* Grafite — texto oficial */ --red: #EF4444; --green: #22C55E; --font-sans: 'DM Sans', system-ui, sans-serif; --font-serif: 'Playfair Display', Georgia, serif; --font-mono: 'DM Mono', monospace; --radius: 8px; --radius-lg: 16px; --radius-xl: 24px; --max-w: 1140px; --section-py: 100px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg-dark); color: var(--gray-300); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ===== UTILITIES ===== */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .section { padding: var(--section-py) 0; } .section-sm { padding: 64px 0; } .text-gold { color: var(--gold); } .text-white { color: var(--white); } .text-muted { color: var(--gray-500); } .text-center { text-align: center; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; } .h1 { font-family: var(--font-serif); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.15; color: var(--white); font-weight: 400; } .h2 { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; color: var(--white); font-weight: 400; } .h3 { font-family: var(--font-serif); font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.25; color: var(--white); font-weight: 400; } .lead { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--gray-400); line-height: 1.75; max-width: 600px; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border: none; transition: all 0.2s ease; white-space: nowrap; } .btn-gold { background: var(--gold); color: #000; } .btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); } .btn-outline { background: transparent; border: 1px solid var(--border-light); color: var(--gray-300); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-ghost { background: transparent; color: var(--gold); padding: 12px 0; font-size: 0.9rem; } .btn-ghost:hover { color: var(--gold-light); } .btn-ghost svg { transition: transform 0.2s; } .btn-ghost:hover svg { transform: translateX(4px); } .btn-lg { padding: 18px 36px; font-size: 1rem; } /* ===== DIVIDER ===== */ .divider { width: 48px; height: 2px; background: var(--gold); margin: 24px 0; } .divider-center { margin: 24px auto; } /* ===== CARDS ===== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: border-color 0.2s, background 0.2s; } .card:hover { border-color: var(--border-light); background: var(--bg-card-hover); } /* ===== NAV ===== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; background: rgba(9,9,11,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color 0.3s; } .nav.scrolled { border-bottom-color: var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-logo { font-family: var(--font-serif); font-size: 1.4rem; color: var(--white); letter-spacing: 0.02em; } .nav-logo span { color: var(--gold); } .nav-logo img { height: 25px !important; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 22px; list-style: none; flex-wrap: nowrap; } .nav-links a { font-size: 0.875rem; color: var(--gray-400); transition: color 0.2s; font-weight: 500; white-space: nowrap; } .nav-links a:hover { color: var(--white); } /* ===== SELETOR DE IDIOMA (PT | EN) ===== */ .lang-switch { display: inline-flex; align-items: center; gap: 6px; } .lang-btn { background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; color: var(--gray-500); padding: 2px 4px; transition: color 0.2s; } .lang-btn:hover { color: var(--white); } .lang-btn.active { color: var(--gold); } .lang-sep { color: var(--border-light); font-size: 0.75rem; } /* Esconde a barra e a UI padrão do Google Translate */ #google_translate_element { display: none !important; } .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate { display: none !important; } body { top: 0 !important; } .goog-tooltip, .goog-tooltip:hover { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* Links cruzados entre as landing pages */ .nav-links li.nav-sep { width: 1px; height: 16px; background: var(--border-light); padding: 0; } .nav-links a.nav-alt { color: var(--gold); font-weight: 600; } .nav-links a.nav-alt:hover { color: var(--gold-light); } .nav-cta { margin-left: 16px; } .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); transition: all 0.3s; } @media (max-width: 768px) { .nav-toggle { display: flex; } .nav-links, .nav-cta { display: none; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-surface); border-bottom: 1px solid var(--border); padding: 24px; gap: 20px; } .nav-links.open + .nav-cta { display: flex; padding: 0 24px 24px; } } /* ===== FOOTER ===== */ .footer { border-top: 1px solid var(--border); padding: 48px 0 32px; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-logo { font-family: var(--font-serif); font-size: 1.2rem; color: var(--white); } .footer-logo span { color: var(--gold); } .footer-logo img { height: 26px; width: auto; display: block; } .footer-copy { font-size: 0.8rem; color: var(--gray-600); } /* ===== STATS ===== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .stat-item { background: var(--bg-card); padding: 40px 32px; text-align: center; } .stat-number { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--gold); line-height: 1; margin-bottom: 8px; } .stat-label { font-size: 0.8rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; } /* ===== FAIXA DE FERRAMENTAS DE IA ===== */ .ai-band { background: var(--ivory); border-top: 1px solid rgba(45, 55, 72, 0.12); border-bottom: 1px solid rgba(45, 55, 72, 0.12); padding: 52px 0; } .ai-band-inner { display: flex; flex-direction: column; align-items: center; gap: 40px; } .ai-band-text { max-width: none; text-align: center; } .ai-band-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; } .ai-band-title { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.35; color: var(--blue-primary); } /* separador oculto no novo layout empilhado */ .ai-band-sep { display: none; } .ai-logos { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; width: 100%; max-width: 960px; } /* cada logo ocupa fatia igual e centraliza dentro dela — uniformiza o peso visual apesar das larguras diferentes */ .ai-logos img { flex: 1 1 0; min-width: 0; height: 28px; max-width: 160px; width: auto; object-fit: contain; opacity: 0.75; /* preto por padrão; ao passar o mouse, volta à cor original da marca */ filter: brightness(0); transition: opacity 0.25s, filter 0.25s; } .ai-logos img:hover { opacity: 1; filter: none; } @media (max-width: 768px) { .ai-band { padding: 40px 0; } .ai-band-inner { gap: 28px; } .ai-logos { justify-content: center; gap: 24px 32px; } .ai-logos img { flex: 0 0 auto; height: 22px; max-width: 110px; } } /* ===== CTA CENTRAL DA SOLUÇÃO ===== */ .solution-cta { max-width: 720px; margin: 0 auto; text-align: center; } .solution-cta .lead-text { font-size: 1.1rem; color: var(--gray-300); line-height: 1.75; margin-bottom: 32px; } .format-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; } .format-pill { border: 1px solid var(--border-light); border-radius: 100px; padding: 9px 20px; font-size: 0.8rem; color: var(--gray-300); background: rgba(255,255,255,0.02); } .format-pill strong { color: var(--gold); font-weight: 600; } .solution-note { font-size: 0.8rem; color: var(--gray-500); margin-top: 18px; } /* ===== PRICING ===== */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } .pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 28px; display: flex; flex-direction: column; position: relative; transition: all 0.25s; } .pricing-card:hover { border-color: var(--border-light); transform: translateY(-4px); } .pricing-card.featured { border-color: var(--gold-dim); background: linear-gradient(135deg, var(--bg-card), rgba(200,168,75,0.05)); } .pricing-card.featured::before { content: 'Mais escolhido'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #000; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 16px; border-radius: 100px; } .pricing-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 12px; } .pricing-name { font-family: var(--font-serif); font-size: 1.4rem; color: var(--white); margin-bottom: 24px; } .pricing-price { margin-bottom: 8px; } .pricing-price .from { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; } .pricing-price .amount { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; color: var(--white); line-height: 1; } .pricing-price .period { font-size: 0.85rem; color: var(--gray-500); margin-left: 4px; } .pricing-desc { font-size: 0.875rem; color: var(--gray-400); line-height: 1.65; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .pricing-features { list-style: none; margin-bottom: 32px; flex: 1; } .pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--gray-300); padding: 8px 0; } .pricing-features li::before { content: '→'; color: var(--gold); font-size: 0.8rem; margin-top: 2px; flex-shrink: 0; } /* ===== SECTION HEADER ===== */ .section-header { max-width: 640px; } .section-header.center { margin: 0 auto; text-align: center; } .section-header.center .lead { margin: 0 auto; } .section-header.center .divider { margin: 24px auto; } /* ===== PAIN POINTS ===== */ .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .pain-item { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--gold-dim); border-radius: var(--radius); padding: 24px; font-size: 0.9rem; color: var(--gray-300); line-height: 1.6; } .pain-item strong { color: var(--white); display: block; margin-bottom: 6px; font-size: 0.95rem; } /* ===== ABOUT ===== */ .about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: center; } @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } } .about-photo { aspect-ratio: 3/4; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: relative; } .about-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gray-600); font-size: 0.8rem; letter-spacing: 0.05em; } .about-contacts { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .btn-linkedin { background: #0A66C2; color: #fff; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; transition: background 0.2s, transform 0.2s; } .btn-linkedin:hover { background: #0958A9; transform: translateY(-1px); } .btn-whatsapp { background: #25D366; color: #000; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; transition: background 0.2s, transform 0.2s; } .btn-whatsapp:hover { background: #1EB858; transform: translateY(-1px); } /* ===== TESTIMONIAL ===== */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .testimonial-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; } .testimonial-text { font-size: 0.95rem; color: var(--gray-300); line-height: 1.7; font-style: italic; margin-bottom: 20px; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 44px; height: 44px; background: var(--gold-bg); border: 1px solid var(--gold-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--gold); } .testimonial-info strong { color: var(--white); font-size: 0.875rem; display: block; } .testimonial-info span { color: var(--gray-500); font-size: 0.8rem; } /* ===== CTA BAND ===== */ .cta-band { background: linear-gradient(135deg, var(--bg-card), rgba(200,168,75,0.06)); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 64px 48px; text-align: center; } @media (max-width: 600px) { .cta-band { padding: 40px 24px; } } /* ===== FADE IN ANIMATIONS ===== */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ===== RESPONSIVE ===== */ @media (max-width: 600px) { :root { --section-py: 64px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } }