/* ========================================================================== CTech Elétrica — Stylesheet Oficial Design System Baseado em gemini-code-1788890910745.md Arquitetura: Mobile-First, Editorial & Instalações Elétricas Performance: Fontes carregadas no com preconnect (zero render blocking) ========================================================================== */ :root { /* Paleta de Cores - Tríade Funcional */ --color-jet-black: #121212; --color-industrial-amber: #FEC408; --color-industrial-amber-hover: #e5b007; --color-deep-pitch: #000000; --color-charcoal: #1a1a1a; --color-warm-canvas: #f9f8f6; --color-paper-white: #ffffff; --color-cream-border: #ede7df; --color-graphite: #404040; --color-stone: #8c8a87; --color-smoke: #ded9d2; --color-amber-wash: #fff8e1; --color-amber-glow: rgba(254, 196, 8, 0.25); /* Tipografia */ --font-serif-display: 'Playfair Display', Georgia, serif; --font-sans-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Escala de Espaçamento */ --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px; --spacing-80: 80px; /* Raios de Arredondamento */ --radius-cards: 16px; --radius-badges: 16px; --radius-inputs: 16px; --radius-buttons: 100px; --radius-pill: 9999px; /* Layout */ --container-max-width: 1160px; --transition-default: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- Reset & Base Styles (Mobile-First) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--color-warm-canvas); color: var(--color-charcoal); font-family: var(--font-sans-body); font-size: 1rem; line-height: 1.6; overflow-x: hidden; position: relative; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: var(--transition-default); } button { cursor: pointer; border: none; background: none; font-family: inherit; } ul { list-style: none; } .container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: var(--spacing-20); padding-right: var(--spacing-20); } /* -------------------------------------------------------------------------- Tipografia Editorial & Títulos -------------------------------------------------------------------------- */ .display-title { font-family: var(--font-serif-display); font-weight: 400; color: var(--color-jet-black); line-height: 1.15; letter-spacing: -0.02em; font-size: clamp(2rem, 5vw + 1rem, 3.75rem); } .display-title em { font-style: italic; font-weight: 400; color: var(--color-jet-black); } .section-title { font-family: var(--font-serif-display); font-weight: 400; color: var(--color-jet-black); line-height: 1.2; letter-spacing: -0.015em; font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem); } .section-title em { font-style: italic; font-weight: 400; } .eyebrow { display: inline-flex; align-items: center; gap: var(--spacing-8); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-jet-black); margin-bottom: var(--spacing-16); } .eyebrow-dot { width: 8px; height: 8px; background-color: var(--color-industrial-amber); border-radius: 50%; display: inline-block; } /* -------------------------------------------------------------------------- Botões & Pílulas -------------------------------------------------------------------------- */ .btn-pill-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-12); background-color: var(--color-industrial-amber); color: var(--color-deep-pitch); font-weight: 700; font-size: 0.95rem; padding: 14px 28px; border-radius: var(--radius-buttons); box-shadow: 0 4px 16px var(--color-amber-glow); transition: var(--transition-default); text-align: center; white-space: nowrap; } .btn-pill-primary:hover { background-color: var(--color-industrial-amber-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(254, 196, 8, 0.4); } .btn-pill-primary:active { transform: translateY(0); } .btn-ghost-link { display: inline-flex; align-items: center; gap: var(--spacing-8); color: var(--color-graphite); font-size: 0.95rem; font-weight: 500; padding: 10px 16px; border-radius: var(--radius-buttons); transition: var(--transition-default); } .btn-ghost-link:hover { color: var(--color-jet-black); background-color: rgba(0, 0, 0, 0.04); } /* -------------------------------------------------------------------------- 1. Header / Navbar -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: rgba(249, 248, 246, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-cream-border); transition: background-color 0.3s ease, border-color 0.3s ease; } .navbar { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand-link { display: flex; align-items: center; gap: var(--spacing-12); } .brand-logo-img { height: 48px; width: auto; object-fit: contain; } .brand-meta { display: flex; flex-direction: column; } .brand-name { font-family: var(--font-sans-body); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-jet-black); line-height: 1.1; } .brand-tagline { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-stone); } .nav-desktop-menu { display: none; } .nav-dot { color: var(--color-smoke); font-size: 0.8rem; user-select: none; } .nav-actions { display: flex; align-items: center; gap: var(--spacing-12); } .nav-cta-btn { display: none; } .nav-whatsapp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background-color: var(--color-industrial-amber); color: var(--color-deep-pitch); box-shadow: 0 2px 10px var(--color-amber-glow); } .nav-mobile-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border-radius: 8px; background-color: var(--color-paper-white); border: 1px solid var(--color-cream-border); cursor: pointer; } .nav-mobile-toggle span { display: block; height: 2px; width: 100%; background-color: var(--color-jet-black); border-radius: 2px; transition: var(--transition-default); } /* Mobile Drawer */ .mobile-nav-drawer { position: fixed; top: 73px; left: 0; right: 0; background-color: var(--color-paper-white); border-bottom: 1px solid var(--color-cream-border); padding: var(--spacing-24) var(--spacing-20); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: var(--spacing-16); transform: translateY(-120%); opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; z-index: 99; } .mobile-nav-drawer.active { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-nav-links { display: flex; flex-direction: column; gap: var(--spacing-12); } .mobile-nav-links a { font-size: 1.1rem; font-weight: 500; color: var(--color-jet-black); padding: var(--spacing-8) 0; border-bottom: 1px solid var(--color-cream-border); } /* -------------------------------------------------------------------------- 2. Hero Section -------------------------------------------------------------------------- */ .hero-section { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); position: relative; } .hero-container { display: flex; flex-direction: column; gap: var(--spacing-40); } .hero-content { max-width: 840px; } .hero-headline { margin-bottom: var(--spacing-20); } .hero-body { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--color-graphite); line-height: 1.65; margin-bottom: var(--spacing-32); max-width: 680px; } .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-16); margin-bottom: var(--spacing-32); } .metric-pill-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8) var(--spacing-12); background-color: var(--color-paper-white); border: 1px solid var(--color-cream-border); border-radius: var(--radius-pill); padding: 10px 20px; font-size: 0.8rem; font-weight: 600; color: var(--color-graphite); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .metric-pill-badge .divider-bullet { color: var(--color-industrial-amber); font-weight: 700; } /* Hero Visual Showcase */ .hero-visual-col { width: 100%; display: flex; justify-content: center; } .hero-image-card { position: relative; width: 100%; max-width: 540px; height: clamp(340px, 45vw, 420px); border-radius: var(--radius-images); overflow: hidden; box-shadow: 0 20px 48px rgba(18, 18, 18, 0.12); border: 1px solid var(--color-cream-border); background-color: var(--color-paper-white); } .hero-main-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .hero-image-card:hover .hero-main-img { transform: scale(1.04); } /* Floating Badges over Hero Image */ .hero-badge-tag { position: absolute; display: inline-flex; align-items: center; gap: var(--spacing-12); background-color: rgba(18, 18, 18, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-pill); padding: 10px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); z-index: 2; transition: transform 0.25s ease; } .hero-badge-tag:hover { transform: translateY(-2px); } .hero-badge-tag.top-badge { top: 16px; right: 16px; border-color: rgba(254, 196, 8, 0.5); } .hero-badge-tag.bottom-badge { bottom: 16px; left: 16px; } .badge-accent-bolt { font-size: 1.1rem; color: var(--color-industrial-amber); } .status-pulse-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); animation: pulse-green 2s infinite; } @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .badge-text-group { display: flex; flex-direction: column; } .badge-title { font-size: 0.82rem; font-weight: 700; color: var(--color-paper-white); line-height: 1.2; } .badge-subtitle { font-size: 0.72rem; color: rgba(255, 255, 255, 0.8); line-height: 1.2; } /* -------------------------------------------------------------------------- 3. Seção de Soluções (3-Card Feature Row) -------------------------------------------------------------------------- */ .solutions-section { padding-top: var(--spacing-48); padding-bottom: var(--spacing-64); } .section-header-block { margin-bottom: var(--spacing-32); } .solutions-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-24); } /* Base Card Style */ .feature-card { border-radius: var(--radius-cards); padding: clamp(24px, 4vw, 32px); position: relative; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.25s ease, box-shadow 0.25s ease; } .feature-card:hover { transform: translateY(-4px); } .card-top { margin-bottom: var(--spacing-24); } .badge-number { display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; border-radius: var(--radius-badges); padding: 6px 14px; margin-bottom: var(--spacing-20); letter-spacing: 0.05em; } .card-title { font-size: 1.35rem; font-weight: 600; line-height: 1.3; margin-bottom: var(--spacing-12); letter-spacing: -0.01em; } .card-desc { font-size: 0.95rem; line-height: 1.6; } /* Card 1: Dark Card (Fundo Escuro / Destaque Técnico) */ .card-dark { background-color: var(--color-jet-black); color: var(--color-paper-white); box-shadow: 0 12px 36px rgba(18, 18, 18, 0.16); } .card-dark .badge-number { background-color: var(--color-industrial-amber); color: var(--color-deep-pitch); } .card-dark .card-title { color: var(--color-paper-white); } .card-dark .card-desc { color: rgba(255, 255, 255, 0.85); } /* Card 2: Light Card (Superfície Paper White com borda suave) */ .card-light { background-color: var(--color-paper-white); border: 1px solid var(--color-cream-border); color: var(--color-charcoal); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); } .card-light .badge-number { background-color: var(--color-warm-canvas); color: var(--color-jet-black); border: 1px solid var(--color-smoke); } .card-light .badge-number::before { content: "•"; color: var(--color-industrial-amber); margin-right: 6px; font-size: 1.1em; } .card-light .card-title { color: var(--color-jet-black); } .card-light .card-desc { color: var(--color-graphite); } /* Card 3: Bordered Accent Card (Destaque com borda âmbar) */ .card-accent-border { background-color: var(--color-paper-white); border: 2px solid var(--color-industrial-amber); color: var(--color-charcoal); box-shadow: 0 6px 24px rgba(254, 196, 8, 0.12); } .card-accent-border .badge-number { background-color: var(--color-amber-wash); color: var(--color-deep-pitch); border: 1px solid var(--color-industrial-amber); } .card-accent-border .card-title { color: var(--color-jet-black); } /* Card Thumbnails */ .card-thumb { width: 100%; height: 190px; border-radius: 12px; overflow: hidden; margin-bottom: var(--spacing-20); background-color: rgba(0, 0, 0, 0.05); position: relative; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .feature-card:hover .card-thumb img { transform: scale(1.05); } /* -------------------------------------------------------------------------- Galeria de Obras & Serviços Realizados (Portfólio em Campo) -------------------------------------------------------------------------- */ .gallery-section { padding-top: var(--spacing-64); padding-bottom: var(--spacing-64); background-color: var(--color-warm-canvas); content-visibility: auto; contain-intrinsic-size: auto 600px; } .gallery-filters { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-bottom: var(--spacing-32); } .gallery-filter-btn { display: inline-flex; align-items: center; gap: var(--spacing-8); background-color: var(--color-paper-white); border: 1px solid var(--color-cream-border); border-radius: var(--radius-pill); padding: 10px 20px; font-size: 0.9rem; font-weight: 600; color: var(--color-graphite); transition: var(--transition-default); cursor: pointer; } .gallery-filter-btn:hover { border-color: var(--color-industrial-amber); color: var(--color-jet-black); } .gallery-filter-btn.active { background-color: var(--color-industrial-amber); color: var(--color-deep-pitch); border-color: var(--color-industrial-amber); box-shadow: 0 4px 12px var(--color-amber-glow); } .gallery-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-20); } .gallery-card { background-color: var(--color-paper-white); border: 1px solid var(--color-cream-border); border-radius: var(--radius-cards); overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; cursor: pointer; display: flex; flex-direction: column; } .gallery-card:hover { transform: translateY(-4px); border-color: var(--color-industrial-amber); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); } .gallery-card.hidden { display: none !important; } .gallery-img-wrap { width: 100%; aspect-ratio: 4 / 3; position: relative; overflow: hidden; background-color: #f0ede8; } .gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .gallery-card:hover .gallery-img-wrap img { transform: scale(1.06); } .gallery-tag-badge { position: absolute; top: 12px; left: 12px; background-color: rgba(18, 18, 18, 0.85); backdrop-filter: blur(8px); color: var(--color-paper-white); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.15); } .gallery-tag-badge.industrial { border-color: var(--color-industrial-amber); color: var(--color-industrial-amber); } .gallery-tag-badge.residential { border-color: #ffffff; color: #ffffff; } .gallery-card-content { padding: var(--spacing-16) var(--spacing-20); display: flex; flex-direction: column; gap: var(--spacing-4); flex: 1; justify-content: space-between; } .gallery-card-title { font-size: 1.05rem; font-weight: 600; color: var(--color-jet-black); line-height: 1.3; } .gallery-card-desc { font-size: 0.85rem; color: var(--color-graphite); line-height: 1.5; } .gallery-card-footer { margin-top: var(--spacing-8); padding-top: var(--spacing-8); border-top: 1px solid var(--color-cream-border); display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: var(--color-stone); } .gallery-view-hint { display: inline-flex; align-items: center; gap: 4px; color: var(--color-charcoal); transition: color 0.2s ease; } .gallery-card:hover .gallery-view-hint { color: var(--color-deep-pitch); } /* Lightbox Modal */ .lightbox-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 18, 18, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: var(--spacing-20); opacity: 0; transition: opacity 0.3s ease; } .lightbox-modal.active { display: flex; opacity: 1; } .lightbox-container { max-width: 850px; width: 100%; background-color: var(--color-jet-black); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-cards); overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; position: relative; } .lightbox-close-btn { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background-color 0.2s ease, transform 0.2s ease; } .lightbox-close-btn:hover { background-color: var(--color-industrial-amber); color: #000000; transform: scale(1.08); } .lightbox-image-box { width: 100%; max-height: 65vh; background-color: #050505; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lightbox-image-box img { max-width: 100%; max-height: 65vh; object-fit: contain; } .lightbox-info-bar { padding: var(--spacing-20) var(--spacing-24); background-color: var(--color-jet-black); display: flex; flex-direction: column; gap: var(--spacing-12); } .lightbox-info-text h3 { color: var(--color-paper-white); font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; } .lightbox-info-text p { color: rgba(255, 255, 255, 0.7); font-size: 0.88rem; } /* -------------------------------------------------------------------------- 4. Regiões de Atendimento (Split Section) -------------------------------------------------------------------------- */ .regions-section { padding-top: var(--spacing-64); padding-bottom: var(--spacing-64); background-color: var(--color-paper-white); border-top: 1px solid var(--color-cream-border); border-bottom: 1px solid var(--color-cream-border); content-visibility: auto; contain-intrinsic-size: auto 500px; } .regions-split-wrapper { display: flex; flex-direction: column; gap: var(--spacing-32); } .regions-info { max-width: 580px; } .regions-info .section-title { margin-bottom: var(--spacing-16); } .regions-info .regions-body-text { font-size: 1rem; color: var(--color-graphite); line-height: 1.6; margin-bottom: var(--spacing-24); } .cities-card-box { background-color: var(--color-warm-canvas); border: 1px solid var(--color-cream-border); border-radius: var(--radius-cards); padding: clamp(20px, 3.5vw, 32px); display: flex; flex-direction: column; gap: var(--spacing-20); } .cities-card-header { display: flex; align-items: center; gap: var(--spacing-12); border-bottom: 1px solid var(--color-cream-border); padding-bottom: var(--spacing-12); } .cities-card-header h3 { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-jet-black); } .cities-pill-grid { display: flex; flex-wrap: wrap; gap: var(--spacing-12); } .city-pill { display: inline-flex; align-items: center; gap: var(--spacing-8); background-color: var(--color-paper-white); border: 1px solid var(--color-cream-border); border-radius: var(--radius-pill); padding: 10px 18px; font-size: 0.95rem; font-weight: 600; color: var(--color-jet-black); transition: var(--transition-default); } .city-pill:hover { border-color: var(--color-industrial-amber); background-color: var(--color-amber-wash); transform: translateY(-2px); } .city-pill-icon { color: var(--color-industrial-amber); display: flex; align-items: center; } .region-guarantee-note { display: flex; align-items: flex-start; gap: var(--spacing-12); font-size: 0.85rem; color: var(--color-stone); line-height: 1.5; } .region-guarantee-note svg { flex-shrink: 0; margin-top: 2px; color: var(--color-industrial-amber); } /* -------------------------------------------------------------------------- 5. FAQ Accordion Section -------------------------------------------------------------------------- */ .faq-section { padding-top: var(--spacing-64); padding-bottom: var(--spacing-64); content-visibility: auto; contain-intrinsic-size: auto 500px; } .faq-layout-split { display: flex; flex-direction: column; gap: var(--spacing-32); } .faq-left-col { max-width: 420px; } .faq-left-col .section-title { margin-bottom: var(--spacing-16); } .faq-left-col p { color: var(--color-graphite); font-size: 0.95rem; } .faq-accordion-group { display: flex; flex-direction: column; gap: var(--spacing-12); } .faq-item { background-color: var(--color-paper-white); border: 1px solid var(--color-cream-border); border-radius: var(--radius-cards); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq-item[open] { border-color: var(--color-industrial-amber); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); } .faq-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-20) var(--spacing-24); cursor: pointer; user-select: none; font-size: 1.05rem; font-weight: 600; color: var(--color-jet-black); gap: var(--spacing-16); } .faq-summary::-webkit-details-marker { display: none; } .faq-chevron { width: 20px; height: 20px; color: var(--color-graphite); flex-shrink: 0; transition: transform 0.25s ease, color 0.25s ease; } .faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--color-jet-black); } .faq-content { padding: 0 var(--spacing-24) var(--spacing-24) var(--spacing-24); font-size: 0.95rem; color: var(--color-charcoal); line-height: 1.65; border-top: 1px solid transparent; } /* -------------------------------------------------------------------------- 6. CTA Final & Footer -------------------------------------------------------------------------- */ .cta-final-section { padding-top: var(--spacing-64); padding-bottom: var(--spacing-64); background-color: var(--color-jet-black); color: var(--color-paper-white); position: relative; overflow: hidden; } .cta-final-section::before { content: ""; position: absolute; top: -150px; right: -150px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(254, 196, 8, 0.12) 0%, rgba(18, 18, 18, 0) 70%); pointer-events: none; } .cta-final-wrapper { max-width: 800px; margin: 0 auto; text-align: center; } .cta-final-wrapper .display-title { color: var(--color-paper-white); margin-bottom: var(--spacing-16); } .cta-final-wrapper .display-title em { color: var(--color-industrial-amber); } .cta-final-wrapper .cta-body { font-size: clamp(1rem, 2vw, 1.15rem); color: rgba(255, 255, 255, 0.85); margin-bottom: var(--spacing-32); line-height: 1.6; } .cta-button-holder { display: flex; justify-content: center; margin-bottom: var(--spacing-48); } /* Direct Contacts Cards */ .contacts-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-16); text-align: left; margin-bottom: var(--spacing-48); } .contact-card-item { display: flex; align-items: center; gap: var(--spacing-16); background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: var(--spacing-16) var(--spacing-20); border-radius: var(--radius-cards); transition: var(--transition-default); } .contact-card-item:hover { background-color: rgba(255, 255, 255, 0.08); border-color: var(--color-industrial-amber); transform: translateY(-2px); } .contact-icon-box { width: 44px; height: 44px; border-radius: 50%; background-color: var(--color-industrial-amber); color: var(--color-deep-pitch); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-details { display: flex; flex-direction: column; } .contact-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); } .contact-value { font-size: 0.95rem; font-weight: 600; color: var(--color-paper-white); } /* Footer Microcopy */ .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--spacing-32); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16); text-align: center; } .footer-logo { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; } .footer-microcopy { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; } /* -------------------------------------------------------------------------- 7. Widget Flutuante (Persistent Chat Widget) -------------------------------------------------------------------------- */ .floating-widget-container { position: fixed; bottom: 20px; right: 16px; left: 16px; max-width: 380px; margin: 0 auto; z-index: 999; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; } .widget-card { width: 100%; background-color: var(--color-paper-white); border: 1px solid var(--color-smoke); border-radius: var(--radius-cards); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16); padding: var(--spacing-16) var(--spacing-20); pointer-events: auto; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; margin-bottom: var(--spacing-8); } .widget-card.minimized { display: none; } .widget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-12); gap: var(--spacing-8); } .widget-brand-info { display: flex; align-items: center; gap: var(--spacing-12); } .widget-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-industrial-amber); color: var(--color-deep-pitch); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px var(--color-amber-glow); } .widget-title { font-size: 0.9rem; font-weight: 600; color: var(--color-jet-black); line-height: 1.2; } .widget-close-btn { color: var(--color-stone); padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; } .widget-close-btn:hover { color: var(--color-jet-black); } .widget-chips-wrapper { display: flex; flex-direction: column; gap: var(--spacing-8); } .widget-chip { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-warm-canvas); border: 1px solid var(--color-cream-border); color: var(--color-jet-black); font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-buttons); transition: var(--transition-default); } .widget-chip:hover { background-color: var(--color-industrial-amber); color: var(--color-deep-pitch); border-color: var(--color-industrial-amber); } .widget-chip-arrow { font-size: 1rem; line-height: 1; } /* Floating Launcher Button */ .widget-toggle-launcher { display: inline-flex; align-items: center; gap: var(--spacing-8); background-color: var(--color-industrial-amber); color: var(--color-deep-pitch); padding: 12px 20px; border-radius: var(--radius-buttons); font-weight: 700; font-size: 0.9rem; box-shadow: 0 6px 20px rgba(254, 196, 8, 0.45); pointer-events: auto; transition: var(--transition-default); } .widget-toggle-launcher:hover { background-color: var(--color-industrial-amber-hover); transform: translateY(-2px); } .widget-toggle-launcher.hidden { display: none; } /* -------------------------------------------------------------------------- Media Queries & Responsividade (Mobile -> Tablet -> Desktop) -------------------------------------------------------------------------- */ @media (min-width: 640px) { .hero-actions { flex-direction: row; align-items: center; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .contacts-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .solutions-grid { grid-template-columns: repeat(3, 1fr); } .regions-split-wrapper { flex-direction: row; align-items: center; justify-content: space-between; } .regions-info { flex: 1; } .cities-card-box { flex: 1; } .faq-layout-split { flex-direction: row; align-items: flex-start; } .faq-left-col { position: sticky; top: 100px; flex: 0 0 360px; } .faq-accordion-group { flex: 1; } .site-footer { flex-direction: row; justify-content: space-between; text-align: left; } } @media (min-width: 1024px) { .nav-desktop-menu { display: flex; align-items: center; gap: var(--spacing-20); } .nav-desktop-menu a { font-size: 0.95rem; font-weight: 500; color: var(--color-graphite); transition: var(--transition-default); } .nav-desktop-menu a:hover { color: var(--color-jet-black); } .nav-cta-btn { display: inline-flex; padding: 10px 22px; font-size: 0.88rem; } .nav-whatsapp-icon-btn, .nav-mobile-toggle { display: none; } .hero-container { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: var(--spacing-48); align-items: center; } .hero-image-card { height: 480px; max-width: 100%; } .floating-widget-container { left: auto; right: 32px; bottom: 32px; width: 360px; } }