/* ==========================================================================
 METALJET - LUXURY INDUSTRIAL B2B DESIGN SYSTEM
 Apple / Tesla Level Aesthetics for Corporate Awards & Wholesale
 Brand Colors: Copper/Bronze (#00D2FF), Obsidian (#08080A), Glass (#121216)
 Typography: Outfit (Headings) & Plus Jakarta Sans (Body)
 ========================================================================== */

/* --------------------------------------------------------------------------
 1. GOOGLE FONTS IMPORT & DESIGN TOKENS
 -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
 /* Marca METALJET - Especificação Oficial */
 --primary: #0066FF; /* Azul Safira / Elétrico Vibrante */
 --primary-hover: #0088FF; /* Azul Realçado para Hover */
 --primary-light: rgba(0, 102, 255, 0.15); /* Glow / Fill sutil */
 --primary-glow: rgba(0, 102, 255, 0.4);
 
 --bg-dark: #121214; /* Grafite Profundo */
 --bg-card: #1C1C20; /* Grafite Card / Metal Dark */
 --bg-card-hover: #26262B; /* Elevado no Hover */
 --bg-surface: #18181C; /* Superfície Intermediária */
 
 --text-main: #FDFBFC; /* Branco Puro / Reflexo Prata */
 --text-muted: #A1A1AA; /* Cinza Prata Suave */
 --text-dim: #71717A; /* Cinza Escuro de Apoio */
 
 --border-color: rgba(255, 255, 255, 0.08); /* Borda Grafite Sutil */
 --border-accent: rgba(0, 102, 255, 0.4); /* Borda Azul em Destaque */
 
 --gold-accent: #D4AF37; /* Ouro Metálico */
 --silver-accent: #E4E3E3; /* Prata Polida */
 --bronze-accent: #CD7F32; /* Bronze Industrial */
 
 --whatsapp-color: #25D366; /* Verde WhatsApp */
 --whatsapp-hover: #20BA5A;
 --whatsapp-glow: rgba(37, 211, 102, 0.35);

 /* Tipografia */
 --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

 /* Modificadores & Formatos */
 --radius-xs: 6px;
 --radius-sm: 10px;
 --radius-md: 16px;
 --radius-lg: 24px;
 --radius-xl: 32px;
 --radius-full: 9999px;

 --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
 --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.6);
 --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.85);
 --shadow-glow: 0 0 30px var(--primary-glow);
 --shadow-glow-strong: 0 0 50px var(--primary-glow-strong);

 --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
 2. KEYFRAME ANIMATIONS & LIGHTING EFFECTS
 -------------------------------------------------------------------------- */

/* Metallic Sweep Effect on Primary Buttons */
@keyframes metallic-shine {
 0% {
 left: -75%;
 }
 20% {
 left: 140%;
 }
 100% {
 left: 140%;
 }
}

/* Ripple Pulse for WhatsApp Float */
@keyframes whatsapp-ripple {
 0% {
 box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7), 0 0 0 0 rgba(37, 211, 102, 0.4);
 }
 50% {
 box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 0 0 30px rgba(37, 211, 102, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 0 0 0 rgba(37, 211, 102, 0);
 }
}

/* Ambient Radial Glow Pulse */
@keyframes ambient-glow-pulse {
 0%, 100% {
 opacity: 0.6;
 transform: scale(1);
 }
 50% {
 opacity: 0.9;
 transform: scale(1.08);
 }
}

/* Instagram Neon Pulse */
@keyframes instagram-neon {
 0%, 100% {
 box-shadow: 0 0 15px rgba(214, 36, 159, 0.4), 0 0 30px rgba(253, 89, 73, 0.2);
 }
 50% {
 box-shadow: 0 0 25px rgba(214, 36, 159, 0.8), 0 0 45px rgba(253, 89, 73, 0.5);
 }
}

/* Float Animation */
@keyframes float-slow {
 0%, 100% {
 transform: translateY(0px);
 }
 50% {
 transform: translateY(-8px);
 }
}

/* Line Accent Glow */
@keyframes line-glow {
 0%, 100% {
 opacity: 0.4;
 }
 50% {
 opacity: 1;
 }
}

/* Fade Up Entrance Animation */
@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* --------------------------------------------------------------------------
 3. MODERN CSS RESET & GLOBAL BASE STYLES
 -------------------------------------------------------------------------- */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 scroll-behavior: smooth;
 font-size: 16px;
 -webkit-text-size-adjust: 100%;
 background-color: var(--bg-dark);
}

body {
 font-family: var(--font-sans);
 background-color: var(--bg-dark);
 color: var(--text-main);
 line-height: 1.6;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 position: relative;
}

/* Prevent scrolling when menu/modal is active */
body.menu-open {
 overflow: hidden;
}

/* Custom Metallic Scrollbar */
::-webkit-scrollbar {
 width: 10px;
}
::-webkit-scrollbar-track {
 background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, #1C1C24 0%, #2A2A36 100%);
 border-radius: var(--radius-full);
 border: 2px solid var(--bg-dark);
}
::-webkit-scrollbar-thumb:hover {
 background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%);
 box-shadow: 0 0 10px var(--primary-glow);
}

/* Custom Text Selection */
::selection {
 background-color: var(--primary);
 color: #FFFFFF;
}

/* Typography Headings Base */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-heading);
 color: var(--text-main);
 font-weight: 700;
 line-height: 1.15;
 letter-spacing: -0.02em;
}

a {
 color: inherit;
 text-decoration: none;
 transition: all var(--transition-fast);
}

button, input, select, textarea {
 font-family: inherit;
 font-size: inherit;
 border: none;
 outline: none;
 background: none;
}

button {
 cursor: pointer;
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

/* --------------------------------------------------------------------------
 4. LAYOUT & REUSABLE LUXURY COMPONENTS
 -------------------------------------------------------------------------- */
.container {
 width: 100%;
 max-width: 1280px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 1.5rem;
 padding-right: 1.5rem;
}

.section {
 padding: 6.5rem 0;
 position: relative;
}

.section-header {
 text-align: center;
 max-width: 780px;
 margin: 0 auto 4rem auto;
 position: relative;
 z-index: 2;
}

.section-header.text-center {
 text-align: center;
}

/* Section Tag / Badge */
.section-tag {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.4rem 1.1rem;
 background: rgba(0, 166, 255, 0.1);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius-full);
 color: var(--primary-hover);
 font-family: var(--font-heading);
 font-size: 0.8125rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.12em;
 margin-bottom: 1.25rem;
 box-shadow: 0 0 15px rgba(0, 166, 255, 0.15);
 backdrop-filter: blur(10px);
}

.section-tag::before {
 content: '';
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: var(--primary);
 box-shadow: 0 0 8px var(--primary-hover);
}

.section-title {
 font-size: 2.75rem;
 font-weight: 800;
 margin-bottom: 1.25rem;
 letter-spacing: -0.03em;
 background: linear-gradient(180deg, #FFFFFF 0%, #D4D4DC 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.section-subtitle {
 color: var(--text-muted);
 font-size: 1.125rem;
 line-height: 1.7;
 font-weight: 400;
}

/* Gradient Highlights */
.text-highlight, .text-gradient-copper, .text-gradient-blue {
 background: linear-gradient(135deg, #00D2FF 0%, #0066FF 50%, #0044FF 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 display: inline;
}

.text-gradient-gold {
 background: linear-gradient(135deg, #FFF1A8 0%, var(--gold-accent) 60%, #D4AF37 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.text-gradient-silver {
 background: linear-gradient(135deg, #FFFFFF 0%, var(--silver-accent) 60%, #94A3B8 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

/* Glassmorphism Panel Base */
.glass-card, .glass-panel {
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 position: relative;
 transition: all var(--transition-normal);
}

.glass-card::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 padding: 1px;
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 166, 255, 0.25) 100%);
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 pointer-events: none;
}

/* --------------------------------------------------------------------------
 5. BUTTONS SYSTEM (METALLIC SWEEP & SHINE)
 -------------------------------------------------------------------------- */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.75rem;
 padding: 0.9375rem 2rem;
 border-radius: var(--radius-md);
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: 0.9375rem;
 letter-spacing: 0.03em;
 transition: all var(--transition-normal);
 position: relative;
 overflow: hidden;
 white-space: nowrap;
 user-select: none;
}

.btn-lg {
 padding: 1.15rem 2.25rem;
 font-size: 1rem;
 border-radius: var(--radius-md);
}

.btn-full {
 width: 100%;
}

/* Primary Copper Metallic Button */
.btn-primary {
 background: linear-gradient(135deg, #00D2FF 0%, #0066FF 40%, #0044FF 100%);
 color: #FFFFFF;
 border: 1px solid rgba(255, 255, 255, 0.2);
 box-shadow: 0 6px 20px rgba(0, 166, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary::after {
 content: '';
 position: absolute;
 top: -50%;
 left: -75%;
 width: 50%;
 height: 200%;
 background: linear-gradient(
 90deg,
 transparent 0%,
 rgba(255, 255, 255, 0.45) 50%,
 transparent 100%
 );
 transform: rotate(25deg);
 animation: metallic-shine 4s infinite ease-in-out;
 pointer-events: none;
}

.btn-primary:hover {
 background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 50%, #0055EE 100%);
 transform: translateY(-3px) scale(1.01);
 box-shadow: 0 10px 30px var(--primary-glow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.5);
 color: #FFFFFF;
}

.btn-primary:active {
 transform: translateY(-1px) scale(0.99);
}

/* Secondary Outline Glass Button */
.btn-outline {
 background: rgba(255, 255, 255, 0.03);
 color: var(--text-main);
 border: 1px solid var(--border-accent);
 backdrop-filter: blur(10px);
}

.btn-outline:hover {
 background: rgba(0, 166, 255, 0.12);
 border-color: var(--primary-hover);
 color: #FFFFFF;
 transform: translateY(-3px);
 box-shadow: 0 8px 25px rgba(0, 166, 255, 0.25);
}

.btn-outline-dark {
 background: rgba(255, 255, 255, 0.03);
 color: var(--text-main);
 border: 1px solid var(--border-glass);
}

.btn-outline-dark:hover {
 background: rgba(255, 255, 255, 0.08);
 border-color: rgba(255, 255, 255, 0.25);
 color: #FFFFFF;
 transform: translateY(-2px);
}

/* Instagram Neon Glow Button */
.btn-instagram {
 background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
 color: #FFFFFF;
 border: 1px solid rgba(255, 255, 255, 0.2);
 box-shadow: 0 6px 20px rgba(253, 29, 29, 0.35);
}

.btn-instagram:hover {
 transform: translateY(-3px) scale(1.02);
 box-shadow: 0 10px 30px rgba(253, 29, 29, 0.6), 0 0 20px rgba(131, 58, 180, 0.5);
 color: #FFFFFF;
}

/* --------------------------------------------------------------------------
 6. HEADER FIXO (GLASSMORPHISM NAV & LOGO)
 -------------------------------------------------------------------------- */
.header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 background: rgba(8, 8, 10, 0.75);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border-bottom: 1px solid var(--border-glass);
 transition: all var(--transition-normal);
}

.header.scrolled {
 background: rgba(8, 8, 10, 0.94);
 border-bottom: 1px solid var(--border-accent);
 box-shadow: 0 10px 35px rgba(0, 0, 0, 0.9);
}

.header-container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 85px;
}

/* Logo Image Styling */
.logo-link {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 transition: transform var(--transition-fast);
}

.logo-link:hover {
 transform: scale(1.03);
}

.logo-img {
 height: 48px;
 width: auto;
 object-fit: contain;
 filter: drop-shadow(0 0 10px rgba(0, 166, 255, 0.3));
}

/* Navigation Links */
.nav-menu {
 display: flex;
 align-items: center;
}

.nav-list {
 display: flex;
 align-items: center;
 gap: 2.25rem;
 list-style: none;
}

.nav-link {
 font-family: var(--font-heading);
 font-size: 0.9375rem;
 font-weight: 600;
 color: var(--text-muted);
 position: relative;
 padding: 0.5rem 0;
 letter-spacing: 0.02em;
}

.nav-link::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0%;
 height: 2px;
 background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
 border-radius: var(--radius-full);
 box-shadow: 0 0 8px var(--primary);
 transition: width var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
 color: var(--text-main);
}

.nav-link:hover::after, .nav-link.active::after {
 width: 100%;
}

/* Header Right Actions */
.header-actions {
 display: flex;
 align-items: center;
 gap: 1.25rem;
}

/* Instagram Header Button with Neon Badge Effect */
.instagram-header-btn, .instagram-glow-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 border-radius: var(--radius-full);
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-glass);
 color: var(--text-main);
 font-size: 1.25rem;
 transition: all var(--transition-normal);
 position: relative;
}

.instagram-header-btn:hover, .instagram-glow-btn:hover {
 background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
 color: #FFFFFF;
 border-color: transparent;
 transform: translateY(-3px) scale(1.08);
 box-shadow: 0 0 25px rgba(214, 36, 159, 0.7), 0 0 15px rgba(253, 89, 73, 0.5);
}

/* Mobile Hamburger Icon */
.mobile-toggle, .menu-toggle {
 display: none;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 44px;
 height: 44px;
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-sm);
 cursor: pointer;
 z-index: 1001;
 gap: 5px;
}

.hamburger, .menu-toggle span {
 width: 22px;
 height: 2px;
 background-color: var(--text-main);
 border-radius: 2px;
 transition: all var(--transition-fast);
 position: relative;
}

.mobile-toggle.active .hamburger {
 background-color: transparent;
}

.mobile-toggle.active .hamburger::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 22px;
 height: 2px;
 background-color: var(--primary-hover);
 transform: rotate(45deg);
}

.mobile-toggle.active .hamburger::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 22px;
 height: 2px;
 background-color: var(--primary-hover);
 transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
 7. HERO SECTION (HIGH CONVERSION B2B LUXURY)
 -------------------------------------------------------------------------- */
.hero-section, .hero {
 position: relative;
 min-height: 100vh;
 padding-top: 140px;
 padding-bottom: 90px;
 display: flex;
 align-items: center;
 background: var(--bg-dark);
 overflow: hidden;
}

/* Radial Ambient Glows Background */
.hero-bg-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 1;
}

.hero-bg-overlay::before {
 content: '';
 position: absolute;
 top: -10%;
 right: -5%;
 width: 650px;
 height: 650px;
 border-radius: 50%;
 background: radial-gradient(circle, var(--primary-glow) 0%, rgba(0, 166, 255, 0.05) 50%, transparent 70%);
 filter: blur(60px);
 animation: ambient-glow-pulse 8s infinite ease-in-out;
}

.hero-bg-overlay::after {
 content: '';
 position: absolute;
 bottom: 5%;
 left: -5%;
 width: 500px;
 height: 500px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, transparent 60%);
 filter: blur(80px);
}

/* Subtle Industrial Grid Pattern */
.hero-section::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: 
 linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
 background-size: 60px 60px;
 pointer-events: none;
 z-index: 1;
}

.hero-container, .hero-grid {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 4rem;
 align-items: center;
 position: relative;
 z-index: 2;
}

.hero-content {
 position: relative;
 z-index: 2;
}

.hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.625rem;
 padding: 0.5rem 1.25rem;
 background: rgba(0, 166, 255, 0.1);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius-full);
 margin-bottom: 1.75rem;
 backdrop-filter: blur(12px);
 font-family: var(--font-heading);
 font-size: 0.875rem;
 font-weight: 700;
 color: var(--silver-accent);
 letter-spacing: 0.04em;
 box-shadow: 0 0 20px rgba(0, 166, 255, 0.15);
}

.hero-badge i {
 color: var(--primary-hover);
}

.hero-title {
 font-size: 3.75rem;
 font-weight: 900;
 line-height: 1.08;
 margin-bottom: 1.5rem;
 letter-spacing: -0.035em;
}

.hero-subtitle, .hero-description {
 font-size: 1.2rem;
 color: var(--text-muted);
 margin-bottom: 2.5rem;
 line-height: 1.7;
 max-width: 620px;
 font-weight: 400;
}

.hero-subtitle strong {
 color: var(--text-main);
 font-weight: 600;
}

.hero-cta-group, .hero-actions {
 display: flex;
 align-items: center;
 gap: 1.25rem;
 flex-wrap: wrap;
 margin-bottom: 2.75rem;
}

/* Hero Trust Badges */
.hero-trust-badges {
 display: flex;
 align-items: center;
 gap: 1.5rem;
 flex-wrap: wrap;
 padding-top: 1.5rem;
 border-top: 1px solid var(--border-glass);
}

.trust-item, .hero-feature-chip {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.875rem;
 font-weight: 600;
 color: var(--text-muted);
}

.trust-item i, .hero-feature-chip i {
 color: var(--primary);
 font-size: 1rem;
}

/* Hero Image Card 3D Frame */
.hero-image-wrapper, .hero-media {
 position: relative;
 z-index: 2;
}

.hero-card-preview, .hero-image-wrapper {
 position: relative;
 border-radius: var(--radius-xl);
 overflow: hidden;
 border: 1px solid var(--border-accent);
 box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), var(--shadow-glow);
 background: var(--bg-card);
 transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.hero-card-preview:hover {
 transform: translateY(-6px) scale(1.01);
 box-shadow: 0 35px 80px rgba(0, 0, 0, 0.95), var(--shadow-glow-strong);
}

.hero-img, .hero-image-wrapper img {
 width: 100%;
 height: 500px;
 object-fit: cover;
 display: block;
 transition: transform 0.8s ease;
}

.hero-card-preview:hover .hero-img {
 transform: scale(1.05);
}

.hero-card-badge, .hero-stat-card {
 position: absolute;
 bottom: 20px;
 left: 20px;
 right: 20px;
 background: rgba(18, 18, 22, 0.88);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-accent);
 padding: 1.25rem 1.75rem;
 border-radius: var(--radius-md);
 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
 display: flex;
 align-items: center;
 gap: 1rem;
 z-index: 3;
}

.hero-card-badge i {
 font-size: 2rem;
 color: var(--gold-accent);
 filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.hero-card-badge span {
 font-family: var(--font-heading);
 font-size: 1.125rem;
 font-weight: 800;
 color: #FFFFFF;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
 8. STATISTICS SECTION (GLASS GRID & METALLIC NUMBERS)
 -------------------------------------------------------------------------- */
.stats-section {
 background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-surface) 100%);
 padding: 5rem 0;
 border-top: 1px solid var(--border-glass);
 border-bottom: 1px solid var(--border-glass);
 position: relative;
}

.stats-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2rem;
}

.stat-card {
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 padding: 2.25rem 1.75rem;
 backdrop-filter: blur(16px);
 transition: all var(--transition-normal);
 position: relative;
 overflow: hidden;
}

.stat-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(90deg, transparent, var(--primary), transparent);
 opacity: 0;
 transition: opacity var(--transition-normal);
}

.stat-card:hover {
 transform: translateY(-8px) scale(1.02);
 border-color: var(--border-accent);
 background: var(--bg-card-hover);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), var(--shadow-glow);
}

.stat-card:hover::before {
 opacity: 1;
}

.stat-icon {
 width: 56px;
 height: 56px;
 border-radius: var(--radius-md);
 background: var(--primary-light);
 border: 1px solid var(--border-accent);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
 color: var(--primary-hover);
 margin-bottom: 1.5rem;
 transition: transform var(--transition-fast);
}

.stat-card:hover .stat-icon {
 transform: scale(1.1) rotate(-5deg);
 background: var(--primary);
 color: #FFFFFF;
 box-shadow: var(--shadow-glow);
}

.stat-number {
 font-family: var(--font-heading);
 font-size: 2.25rem;
 font-weight: 900;
 line-height: 1;
 margin-bottom: 0.5rem;
 background: linear-gradient(135deg, #FFFFFF 0%, var(--silver-accent) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.stat-title {
 font-family: var(--font-heading);
 font-size: 1.125rem;
 font-weight: 700;
 color: var(--primary-hover);
 margin-bottom: 0.5rem;
}

.stat-desc {
 font-size: 0.875rem;
 color: var(--text-muted);
 line-height: 1.5;
}

/* --------------------------------------------------------------------------
 9. CATALOGO DE PRODUTOS EM ATACADO (FILTER PILLS & 3D CARDS)
 -------------------------------------------------------------------------- */
.products-section, .catalog-section {
 background-color: var(--bg-dark);
 position: relative;
 padding: 7rem 0;
}

/* Glowing Interactive Filter Pills */
.filter-container {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 0.875rem;
 margin-bottom: 4rem;
}

.filter-btn, .filter-pill {
 padding: 0.75rem 1.625rem;
 border-radius: var(--radius-full);
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border-glass);
 color: var(--text-muted);
 font-family: var(--font-heading);
 font-size: 0.9375rem;
 font-weight: 700;
 cursor: pointer;
 transition: all var(--transition-normal);
 backdrop-filter: blur(10px);
}

.filter-btn:hover, .filter-pill:hover {
 background: rgba(255, 255, 255, 0.08);
 color: var(--text-main);
 border-color: rgba(255, 255, 255, 0.2);
 transform: translateY(-2px);
}

.filter-btn.active, .filter-pill.active {
 background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
 color: #FFFFFF;
 border-color: var(--primary-hover);
 box-shadow: 0 6px 20px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
 transform: translateY(-2px);
}

/* Products Grid */
.products-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 2.25rem;
}

/* Product Card 3D Lift & Illumination */
.product-card {
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 overflow: hidden;
 transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast), background var(--transition-fast);
 display: flex;
 flex-direction: column;
 position: relative;
 backdrop-filter: blur(16px);
}

.product-card:hover {
 transform: translateY(-10px) scale(1.02);
 border-color: var(--border-accent);
 box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), var(--shadow-glow);
 background: var(--bg-card-hover);
}

.product-image-container {
 position: relative;
 width: 100%;
 height: 280px;
 background: #0B0B0E;
 overflow: hidden;
}

.product-img, .product-image-container img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-img, .product-card:hover .product-image-container img {
 transform: scale(1.08);
}

/* Product Category Badge */
.product-badge {
 position: absolute;
 top: 14px;
 left: 14px;
 padding: 0.35rem 0.85rem;
 background: rgba(8, 8, 10, 0.85);
 backdrop-filter: blur(10px);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius-xs);
 font-family: var(--font-heading);
 font-size: 0.75rem;
 font-weight: 800;
 color: var(--silver-accent);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 z-index: 2;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Product Info Content */
.product-info, .product-body {
 padding: 1.75rem;
 display: flex;
 flex-direction: column;
 flex-grow: 1;
}

.product-title {
 font-size: 1.35rem;
 font-weight: 800;
 margin-bottom: 0.75rem;
 color: var(--text-main);
 line-height: 1.3;
}

.product-desc {
 font-size: 0.9375rem;
 color: var(--text-muted);
 line-height: 1.6;
 margin-bottom: 1.5rem;
}

.product-specs {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 0.6rem;
 margin-bottom: 1.75rem;
}

.product-specs li {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 font-size: 0.875rem;
 color: var(--silver-accent);
 font-weight: 500;
}

.product-specs li i {
 color: var(--primary-hover);
 font-size: 0.875rem;
}

.product-info .btn, .product-body .btn {
 margin-top: auto;
}

/* --------------------------------------------------------------------------
 10. PASSO A PASSO / COMO FUNCIONA (PROCESS SECTION)
 -------------------------------------------------------------------------- */
.process-section {
 background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-dark) 100%);
 border-top: 1px solid var(--border-glass);
 border-bottom: 1px solid var(--border-glass);
 padding: 7rem 0;
}

.process-steps-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2rem;
 margin-bottom: 4rem;
}

.step-card {
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 padding: 2.5rem 1.75rem 2rem 1.75rem;
 position: relative;
 transition: all var(--transition-normal);
 backdrop-filter: blur(16px);
}

.step-card:hover {
 transform: translateY(-8px);
 border-color: var(--border-accent);
 background: var(--bg-card-hover);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), var(--shadow-glow);
}

.step-number {
 position: absolute;
 top: 1.5rem;
 right: 1.5rem;
 font-family: var(--font-heading);
 font-size: 2rem;
 font-weight: 900;
 color: rgba(255, 255, 255, 0.06);
 line-height: 1;
 transition: color var(--transition-fast);
}

.step-card:hover .step-number {
 color: var(--primary-light);
}

.step-icon {
 width: 60px;
 height: 60px;
 border-radius: var(--radius-md);
 background: var(--primary-light);
 border: 1px solid var(--border-accent);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.625rem;
 color: var(--primary-hover);
 margin-bottom: 1.75rem;
 transition: transform var(--transition-fast);
}

.step-card:hover .step-icon {
 transform: scale(1.1);
 background: var(--primary);
 color: #FFFFFF;
 box-shadow: var(--shadow-glow);
}

.step-title {
 font-size: 1.25rem;
 font-weight: 800;
 margin-bottom: 0.75rem;
 color: var(--text-main);
}

.step-desc {
 font-size: 0.9375rem;
 color: var(--text-muted);
 line-height: 1.6;
}

.process-cta {
 text-align: center;
}

/* --------------------------------------------------------------------------
 11. GALERIA / PORTFÓLIO EM DESTAQUE (GALLERY SECTION)
 -------------------------------------------------------------------------- */
.gallery-section {
 padding: 7rem 0;
 background-color: var(--bg-dark);
}

.gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 gap: 2rem;
 margin-bottom: 4rem;
}

.gallery-item {
 position: relative;
 border-radius: var(--radius-lg);
 overflow: hidden;
 border: 1px solid var(--border-glass);
 height: 320px;
 background: var(--bg-card);
 box-shadow: var(--shadow-md);
}

.gallery-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 30%, rgba(8, 8, 10, 0.95) 100%);
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 2rem;
 opacity: 0.85;
 transition: opacity var(--transition-normal);
}

.gallery-item:hover img {
 transform: scale(1.08);
}

.gallery-item:hover .gallery-overlay {
 opacity: 1;
 background: linear-gradient(180deg, rgba(8, 8, 10, 0.2) 0%, rgba(8, 8, 10, 0.98) 100%);
}

.gallery-overlay h4 {
 font-size: 1.35rem;
 font-weight: 800;
 color: #FFFFFF;
 margin-bottom: 0.35rem;
 transform: translateY(10px);
 transition: transform var(--transition-normal);
}

.gallery-overlay p {
 font-size: 0.9375rem;
 color: var(--primary-hover);
 font-weight: 600;
 transform: translateY(10px);
 transition: transform var(--transition-normal);
}

.gallery-item:hover .gallery-overlay h4,
.gallery-item:hover .gallery-overlay p {
 transform: translateY(0);
}

/* Instagram Callout Box */
.instagram-callout {
 background: var(--bg-card);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius-lg);
 padding: 3rem 2rem;
 text-align: center;
 box-shadow: var(--shadow-lg), var(--shadow-glow);
 backdrop-filter: blur(20px);
 max-width: 800px;
 margin: 0 auto;
}

.instagram-callout p {
 font-family: var(--font-heading);
 font-size: 1.35rem;
 font-weight: 700;
 margin-bottom: 1.75rem;
 color: var(--text-main);
}

/* --------------------------------------------------------------------------
 12. SOBRE NÓS (ABOUT SECTION)
 -------------------------------------------------------------------------- */
.about-section {
 background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-surface) 100%);
 padding: 7rem 0;
 border-top: 1px solid var(--border-glass);
}

.about-container {
 display: grid;
 grid-template-columns: 1fr 1.1fr;
 gap: 4.5rem;
 align-items: center;
}

.about-image {
 position: relative;
}

.about-img-frame {
 position: relative;
 border-radius: var(--radius-xl);
 overflow: hidden;
 border: 1px solid var(--border-accent);
 box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), var(--shadow-glow);
}

.about-img {
 width: 100%;
 height: 480px;
 object-fit: cover;
 display: block;
}

.about-experience-badge {
 position: absolute;
 bottom: 25px;
 right: 25px;
 background: rgba(18, 18, 22, 0.92);
 backdrop-filter: blur(20px);
 border: 1px solid var(--border-accent);
 padding: 1.25rem 1.75rem;
 border-radius: var(--radius-md);
 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.exp-years {
 font-family: var(--font-heading);
 font-size: 1.25rem;
 font-weight: 900;
 color: var(--primary-hover);
 letter-spacing: 0.05em;
}

.exp-text {
 font-size: 0.8125rem;
 color: var(--text-muted);
 font-weight: 600;
}

.about-content {
 display: flex;
 flex-direction: column;
}

.about-text {
 font-size: 1.0625rem;
 color: var(--text-muted);
 line-height: 1.75;
 margin-bottom: 1.25rem;
}

.about-text strong {
 color: var(--text-main);
}

.about-pillars {
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
 margin-top: 1.5rem;
}

.pillar-item {
 display: flex;
 align-items: flex-start;
 gap: 1.25rem;
 padding: 1.25rem;
 background: rgba(255, 255, 255, 0.02);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-md);
 transition: all var(--transition-normal);
}

.pillar-item:hover {
 background: rgba(0, 166, 255, 0.08);
 border-color: var(--border-accent);
 transform: translateX(6px);
}

.pillar-item i {
 font-size: 1.75rem;
 color: var(--primary);
 margin-top: 4px;
}

.pillar-item h4 {
 font-size: 1.125rem;
 font-weight: 800;
 color: var(--text-main);
 margin-bottom: 0.25rem;
}

.pillar-item p {
 font-size: 0.875rem;
 color: var(--text-muted);
}

/* --------------------------------------------------------------------------
 13. CANAIS DE CONTATO (CONTACT SECTION)
 -------------------------------------------------------------------------- */
.contact-section {
 padding: 7rem 0;
 background-color: var(--bg-dark);
}

.contact-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2.25rem;
}

.contact-card {
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-lg);
 padding: 3rem 2rem;
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 transition: all var(--transition-normal);
 backdrop-filter: blur(16px);
}

.contact-card:hover {
 transform: translateY(-8px);
 border-color: var(--border-accent);
 background: var(--bg-card-hover);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), var(--shadow-glow);
}

.contact-icon {
 width: 70px;
 height: 70px;
 border-radius: var(--radius-full);
 background: var(--primary-light);
 border: 1px solid var(--border-accent);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 2rem;
 color: var(--primary-hover);
 margin-bottom: 1.5rem;
 transition: transform var(--transition-fast);
}

.contact-card:hover .contact-icon {
 transform: scale(1.1);
 background: var(--primary);
 color: #FFFFFF;
 box-shadow: var(--shadow-glow);
}

.contact-card h3 {
 font-size: 1.35rem;
 font-weight: 800;
 margin-bottom: 0.75rem;
 color: var(--text-main);
}

.contact-card p {
 font-size: 0.9375rem;
 color: var(--text-muted);
 line-height: 1.6;
 margin-bottom: 1.75rem;
}

.badge-status {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem 1rem;
 background: rgba(37, 211, 102, 0.1);
 border: 1px solid rgba(37, 211, 102, 0.3);
 border-radius: var(--radius-full);
 color: var(--whatsapp-color);
 font-size: 0.8125rem;
 font-weight: 700;
}

.badge-status i {
 font-size: 0.5rem;
 animation: pulse-dot 2s infinite;
}

/* --------------------------------------------------------------------------
 14. MODAL DE ORÇAMENTO 3D CONFIGURATOR STYLE (GLASS OVERLAY & FORM)
 -------------------------------------------------------------------------- */
.modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(4, 4, 6, 0.88);
 backdrop-filter: blur(24px);
 -webkit-backdrop-filter: blur(24px);
 z-index: 2000;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 1.5rem;
 opacity: 0;
 visibility: hidden;
 transition: all var(--transition-normal);
}

.modal-overlay.active {
 opacity: 1;
 visibility: visible;
}

.modal-content, .modal-container {
 background: var(--bg-card);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius-xl);
 width: 100%;
 max-width: 660px;
 max-height: 92vh;
 overflow-y: auto;
 padding: 3rem 2.5rem;
 box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), var(--shadow-glow-strong);
 position: relative;
 transform: scale(0.92) translateY(25px);
 transition: transform var(--transition-smooth);
}

.modal-overlay.active .modal-content,
.modal-overlay.active .modal-container {
 transform: scale(1) translateY(0);
}

/* Metallic Close Button */
.modal-close, .modal-close-btn {
 position: absolute;
 top: 1.75rem;
 right: 1.75rem;
 width: 40px;
 height: 40px;
 border-radius: var(--radius-full);
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid var(--border-glass);
 color: var(--text-muted);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.35rem;
 transition: all var(--transition-fast);
 cursor: pointer;
}

.modal-close:hover, .modal-close-btn:hover {
 background: var(--primary);
 color: #FFFFFF;
 border-color: var(--primary-hover);
 transform: rotate(90deg) scale(1.1);
 box-shadow: var(--shadow-glow);
}

.modal-header {
 margin-bottom: 2rem;
}

.modal-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.35rem 0.9rem;
 background: rgba(37, 211, 102, 0.12);
 border: 1px solid rgba(37, 211, 102, 0.3);
 border-radius: var(--radius-full);
 color: var(--whatsapp-color);
 font-family: var(--font-heading);
 font-size: 0.8125rem;
 font-weight: 700;
 margin-bottom: 1rem;
}

.modal-title {
 font-size: 2rem;
 font-weight: 800;
 margin-bottom: 0.5rem;
 background: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.modal-subtitle {
 font-size: 0.9375rem;
 color: var(--text-muted);
 line-height: 1.6;
}

/* Modal Form Controls */
.modal-form, .quote-form {
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
}

.form-group {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1.25rem;
}

.form-group label {
 font-family: var(--font-heading);
 font-size: 0.875rem;
 font-weight: 700;
 color: var(--silver-accent);
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.form-group label i {
 color: var(--primary-hover);
}

.form-group input,
.form-group select,
.form-group textarea,
.form-input,
.form-select,
.form-textarea {
 width: 100%;
 padding: 0.9375rem 1.25rem;
 background: rgba(14, 14, 18, 0.95);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-md);
 color: var(--text-main);
 font-size: 0.9375rem;
 transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(0, 166, 255, 0.25), 0 0 15px var(--primary-glow);
 background: rgba(20, 20, 26, 1);
}

.form-group select option, .form-select option {
 background: var(--bg-card);
 color: var(--text-main);
 padding: 0.5rem;
}

.form-group textarea, .form-textarea {
 resize: vertical;
 min-height: 100px;
}

.btn-whatsapp-submit {
 background: linear-gradient(135deg, var(--whatsapp-color) 0%, #1DA851 100%);
 color: #FFFFFF;
 font-family: var(--font-heading);
 font-weight: 800;
 font-size: 1.0625rem;
 padding: 1.125rem;
 border-radius: var(--radius-md);
 margin-top: 0.75rem;
 box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.75rem;
 letter-spacing: 0.03em;
 transition: all var(--transition-normal);
}

.btn-whatsapp-submit:hover {
 background: linear-gradient(135deg, var(--whatsapp-hover) 0%, var(--whatsapp-color) 100%);
 transform: translateY(-3px);
 box-shadow: 0 12px 35px rgba(37, 211, 102, 0.55);
}

.form-disclaimer {
 text-align: center;
 font-size: 0.8125rem;
 color: var(--text-dim);
 margin-top: 0.5rem;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.35rem;
}

/* --------------------------------------------------------------------------
 15. BOTÕES FLUTUANTES (WHATSAPP PULSE & INSTAGRAM NEON)
 -------------------------------------------------------------------------- */
.floating-actions {
 position: fixed;
 bottom: 30px;
 right: 30px;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 z-index: 999;
}

.float-btn {
 width: 60px;
 height: 60px;
 border-radius: var(--radius-full);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.85rem;
 color: #FFFFFF;
 position: relative;
 transition: all var(--transition-normal);
 backdrop-filter: blur(10px);
}

/* WhatsApp Floating Button */
.float-whatsapp, .whatsapp-float {
 background: linear-gradient(135deg, var(--whatsapp-color) 0%, #1DA851 100%);
 box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
 animation: whatsapp-ripple 3s infinite;
}

.float-whatsapp:hover, .whatsapp-float:hover {
 transform: scale(1.12) rotate(8deg);
 background: var(--whatsapp-hover);
 box-shadow: 0 15px 40px rgba(37, 211, 102, 0.7);
}

/* Instagram Floating Button */
.float-instagram {
 background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
 box-shadow: 0 10px 30px rgba(214, 36, 159, 0.4);
}

.float-instagram:hover {
 transform: scale(1.12) rotate(-8deg);
 box-shadow: 0 15px 40px rgba(214, 36, 159, 0.7), 0 0 20px rgba(253, 89, 73, 0.5);
}

/* Tooltip on Float Hover */
.float-tooltip, .whatsapp-tooltip {
 position: absolute;
 right: 75px;
 background: rgba(18, 18, 22, 0.95);
 border: 1px solid var(--border-accent);
 padding: 0.5rem 1rem;
 border-radius: var(--radius-md);
 white-space: nowrap;
 font-family: var(--font-heading);
 font-size: 0.8125rem;
 font-weight: 700;
 color: #FFFFFF;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
 opacity: 0;
 pointer-events: none;
 transition: opacity var(--transition-fast), transform var(--transition-fast);
 transform: translateX(10px);
}

.float-btn:hover .float-tooltip,
.whatsapp-float:hover .whatsapp-tooltip {
 opacity: 1;
 transform: translateX(0);
}

/* --------------------------------------------------------------------------
 16. RODAPÉ PREMIUM (FOOTER LUXURY)
 -------------------------------------------------------------------------- */
.footer {
 background-color: #050507;
 border-top: 1px solid var(--border-accent);
 padding-top: 5.5rem;
 padding-bottom: 2.5rem;
 position: relative;
}

.footer-container {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1.5fr;
 gap: 3.5rem;
 margin-bottom: 4rem;
}

.footer-logo {
 height: 48px;
 width: auto;
 margin-bottom: 1.25rem;
}

.footer-desc, .footer-brand-desc {
 color: var(--text-muted);
 font-size: 0.9375rem;
 line-height: 1.7;
 margin-bottom: 1.75rem;
 max-width: 340px;
}

.footer-socials {
 display: flex;
 align-items: center;
 gap: 1rem;
}

.footer-socials a {
 width: 42px;
 height: 42px;
 border-radius: var(--radius-full);
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-glass);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-main);
 font-size: 1.2rem;
 transition: all var(--transition-normal);
}

.footer-socials a:hover {
 background: var(--primary);
 border-color: var(--primary-hover);
 color: #FFFFFF;
 transform: translateY(-3px);
 box-shadow: var(--shadow-glow);
}

.footer-heading, .footer-title {
 font-size: 1.15rem;
 font-weight: 800;
 margin-bottom: 1.75rem;
 color: #FFFFFF;
 position: relative;
}

.footer-heading::after, .footer-title::after {
 content: '';
 display: block;
 width: 32px;
 height: 3px;
 background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
 margin-top: 0.5rem;
 border-radius: var(--radius-full);
 box-shadow: 0 0 8px var(--primary);
}

.footer-links {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 0.875rem;
}

.footer-links a {
 color: var(--text-muted);
 font-size: 0.9375rem;
 font-weight: 500;
 transition: all var(--transition-fast);
}

.footer-links a:hover {
 color: var(--primary-hover);
 padding-left: 6px;
}

.footer-contact-info {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 1.125rem;
}

.footer-contact-info li, .contact-item {
 display: flex;
 align-items: flex-start;
 gap: 0.875rem;
 color: var(--text-muted);
 font-size: 0.9375rem;
 line-height: 1.5;
}

.footer-contact-info li i, .contact-item i {
 color: var(--primary-hover);
 font-size: 1.125rem;
 margin-top: 2px;
}

/* Copyright Bottom Bar */
.footer-bottom {
 padding-top: 2.25rem;
 border-top: 1px solid var(--border-glass);
 color: var(--text-dim);
 font-size: 0.875rem;
 text-align: center;
}

/* --------------------------------------------------------------------------
 17. SCROLL ENTRANCE ANIMATIONS (INTERSECTION OBSERVER CLASS)
 -------------------------------------------------------------------------- */
.animate-on-scroll {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.in-view {
 opacity: 1;
 transform: translateY(0);
}

/* --------------------------------------------------------------------------
 18. RESPONSIVIDADE EXTREMA (MOBILE & TABLET OPTIMIZATION)
 -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
 .hero-title {
 font-size: 3.25rem;
 }

 .stats-grid, .process-steps-grid {
 grid-template-columns: repeat(2, 1fr);
 }

 .footer-container {
 grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
 gap: 2.5rem;
 }
}

@media (max-width: 992px) {
 .hero-container, .hero-grid {
 grid-template-columns: 1fr;
 gap: 3.5rem;
 text-align: center;
 }

 .hero-subtitle, .hero-description {
 margin-left: auto;
 margin-right: auto;
 }

 .hero-cta-group, .hero-actions, .hero-trust-badges {
 justify-content: center;
 }

 .hero-img, .hero-image-wrapper img {
 height: 400px;
 }

 .about-container {
 grid-template-columns: 1fr;
 gap: 3.5rem;
 }

 .contact-grid {
 grid-template-columns: 1fr;
 }

 .footer-container {
 grid-template-columns: 1fr 1fr;
 gap: 3rem;
 }
}

@media (max-width: 768px) {
 .section, .products-section, .process-section, .gallery-section, .about-section, .contact-section {
 padding: 4.5rem 0;
 }

 .section-title {
 font-size: 2.125rem;
 }

 .hero-title {
 font-size: 2.5rem;
 }

 /* Mobile Drawer Menu */
 .mobile-toggle, .menu-toggle {
 display: flex;
 }

 .nav-menu {
 position: fixed;
 top: 85px;
 left: -100%;
 width: 100%;
 height: calc(100vh - 85px);
 background: rgba(8, 8, 10, 0.98);
 backdrop-filter: blur(30px);
 -webkit-backdrop-filter: blur(30px);
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 2rem;
 transition: left var(--transition-smooth);
 border-top: 1px solid var(--border-glass);
 }

 .nav-menu.active {
 left: 0;
 }

 .nav-list {
 flex-direction: column;
 gap: 2rem;
 text-align: center;
 }

 .nav-link {
 font-size: 1.25rem;
 }

 .stats-grid, .process-steps-grid {
 grid-template-columns: 1fr;
 }

 .gallery-grid {
 grid-template-columns: 1fr;
 }

 .form-row {
 grid-template-columns: 1fr;
 }

 .footer-container {
 grid-template-columns: 1fr;
 gap: 2.5rem;
 }

 .floating-actions {
 bottom: 20px;
 right: 20px;
 }

 .float-btn {
 width: 52px;
 height: 52px;
 font-size: 1.5rem;
 }
}

@media (max-width: 480px) {
 .hero-title {
 font-size: 2.1rem;
 }

 .btn {
 width: 100%;
 }

 .modal-content, .modal-container {
 padding: 2rem 1.25rem;
 }

 .filter-btn, .filter-pill {
 padding: 0.6rem 1.1rem;
 font-size: 0.85rem;
 }

 .hero-card-badge, .hero-stat-card {
 position: relative;
 bottom: auto;
 left: auto;
 right: auto;
 margin-top: 1rem;
 }
}

/* ==========================================================================
 13. COMPONENT STYLES: 4-STEP WIZARD, INSTAGRAM GALLERY & QUICKVIEW
 ========================================================================== */

/* Step Wizard Progress Bar */
.step-wizard-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 2rem;
 padding: 1rem 0;
 position: relative;
}

.step-indicator {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.35rem;
 position: relative;
 z-index: 2;
 cursor: pointer;
}

.step-number {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 background: var(--bg-surface);
 border: 2px solid var(--border-color);
 color: var(--text-muted);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: 0.9375rem;
 transition: all var(--transition-normal);
}

.step-label {
 font-family: var(--font-heading);
 font-size: 0.75rem;
 font-weight: 600;
 color: var(--text-dim);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 transition: color var(--transition-normal);
}

.step-indicator.active .step-number {
 background: var(--primary);
 border-color: var(--primary-hover);
 color: #FFF;
 box-shadow: var(--shadow-glow);
 transform: scale(1.1);
}

.step-indicator.active .step-label {
 color: var(--primary-hover);
}

.step-indicator.completed .step-number {
 background: rgba(37, 211, 102, 0.2);
 border-color: var(--whatsapp-color);
 color: var(--whatsapp-color);
}

.step-line {
 flex-grow: 1;
 height: 2px;
 background: var(--border-color);
 margin: 0 0.5rem;
 margin-bottom: 1.25rem;
}

/* Form Steps Container */
.form-step {
 display: none;
 animation: fadeInStep 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.form-step.active {
 display: block;
}

@keyframes fadeInStep {
 from {
 opacity: 0;
 transform: translateY(12px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

.step-heading {
 font-family: var(--font-heading);
 font-size: 1.125rem;
 font-weight: 700;
 margin-bottom: 1.25rem;
 color: var(--text-main);
 border-left: 3px solid var(--primary);
 padding-left: 0.75rem;
}

/* Option Cards Grid for Steps 1 & 2 */
.option-cards-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
 margin-bottom: 1.75rem;
}

.option-card {
 background: rgba(18, 18, 20, 0.7);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 1.125rem;
 cursor: pointer;
 transition: all var(--transition-normal);
 position: relative;
 display: block;
}

.option-card input[type="radio"] {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

.option-card-content {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0.35rem;
}

.option-icon {
 font-size: 1.35rem;
 color: var(--primary);
 margin-bottom: 0.25rem;
 transition: transform var(--transition-fast);
}

.option-title {
 font-family: var(--font-heading);
 font-size: 0.9375rem;
 font-weight: 700;
 color: var(--text-main);
}

.option-desc {
 font-size: 0.8125rem;
 color: var(--text-muted);
 line-height: 1.4;
}

.option-card:hover {
 border-color: rgba(255, 255, 255, 0.2);
 background: rgba(28, 28, 34, 0.9);
 transform: translateY(-2px);
}

.option-card.selected {
 background: rgba(0, 102, 255, 0.15);
 border-color: var(--primary);
 box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
}

.option-card.selected .option-icon {
 transform: scale(1.15);
 color: var(--primary-hover);
}

.step-actions {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 margin-top: 1.75rem;
 padding-top: 1.25rem;
 border-top: 1px solid var(--border-color);
}

/* Step 4 Summary & Guarantee Box */
.summary-box {
 background: rgba(18, 18, 20, 0.9);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 1.25rem;
 margin-bottom: 1.25rem;
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}

.summary-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.875rem;
 border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
 padding-bottom: 0.5rem;
}

.summary-item:last-child {
 border-bottom: none;
 padding-bottom: 0;
}

.summary-label {
 color: var(--text-muted);
 font-weight: 500;
}

.summary-value {
 color: var(--text-main);
 font-family: var(--font-heading);
 font-weight: 700;
}

.guarantee-box {
 background: rgba(37, 211, 102, 0.08);
 border: 1px solid rgba(37, 211, 102, 0.3);
 border-radius: var(--radius-md);
 padding: 1rem;
 display: flex;
 align-items: center;
 gap: 0.875rem;
 color: var(--text-main);
 font-size: 0.84375rem;
 margin-bottom: 1rem;
}

.guarantee-box i {
 color: var(--whatsapp-color);
 font-size: 1.5rem;
 flex-shrink: 0;
}

/* Instagram Header Badge */
.instagram-badge-pop {
 position: absolute;
 top: -28px;
 left: 50%;
 transform: translateX(-50%);
 background: linear-gradient(135deg, #d6249f 0%, #fd5949 100%);
 color: #FFF;
 font-family: var(--font-heading);
 font-size: 0.65rem;
 font-weight: 800;
 padding: 0.15rem 0.5rem;
 border-radius: var(--radius-full);
 white-space: nowrap;
 opacity: 0;
 pointer-events: none;
 transition: opacity var(--transition-fast), transform var(--transition-fast);
 box-shadow: 0 4px 10px rgba(214, 36, 159, 0.4);
}

.instagram-glow-btn:hover .instagram-badge-pop {
 opacity: 1;
 transform: translateX(-50%) translateY(-2px);
}

/* Instagram Section & Factory Gallery */
.instagram-section {
 background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-dark) 100%);
 border-top: 1px solid var(--border-color);
 border-bottom: 1px solid var(--border-color);
 padding: 6rem 0;
}

.instagram-card-wrapper {
 background: var(--bg-card);
 border: 1px solid var(--border-accent);
 border-radius: var(--radius-lg);
 padding: 3.5rem 2.5rem;
 box-shadow: var(--shadow-lg), var(--shadow-glow);
 backdrop-filter: blur(16px);
 text-align: center;
 position: relative;
 overflow: hidden;
}

.instagram-header-box {
 max-width: 650px;
 margin: 0 auto 2.5rem auto;
}

.instagram-pill {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.4rem 1.125rem;
 background: linear-gradient(135deg, rgba(214, 36, 159, 0.15), rgba(253, 89, 73, 0.15));
 border: 1px solid rgba(214, 36, 159, 0.3);
 border-radius: var(--radius-full);
 color: #FD5949;
 font-family: var(--font-heading);
 font-size: 0.8125rem;
 font-weight: 700;
 margin-bottom: 1rem;
}

.instagram-title {
 font-size: 2.25rem;
 font-weight: 800;
 margin-bottom: 1rem;
}

.instagram-subtitle {
 color: var(--text-muted);
 font-size: 1rem;
 line-height: 1.6;
}

.instagram-photos-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1.25rem;
 margin-bottom: 2.5rem;
}

.insta-photo-card {
 position: relative;
 border-radius: var(--radius-md);
 overflow: hidden;
 height: 220px;
 border: 1px solid var(--border-color);
}

.insta-photo-card img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.6s ease;
}

.insta-photo-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(18, 18, 20, 0.65);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #FFF;
 font-size: 2rem;
 opacity: 0;
 transition: opacity var(--transition-normal);
}

.insta-photo-card:hover img {
 transform: scale(1.1);
}

.insta-photo-card:hover .insta-photo-overlay {
 opacity: 1;
}

.btn-instagram-large {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.75rem;
 padding: 1rem 2.25rem;
 border-radius: var(--radius-md);
 background: linear-gradient(135deg, #fdf497 0%, #fd5949 50%, #d6249f 100%);
 color: #FFF;
 font-family: var(--font-heading);
 font-size: 1rem;
 font-weight: 800;
 box-shadow: 0 8px 25px rgba(214, 36, 159, 0.4);
 transition: all var(--transition-normal);
}

.btn-instagram-large:hover {
 transform: translateY(-3px) scale(1.03);
 box-shadow: 0 12px 35px rgba(214, 36, 159, 0.6);
 color: #FFF;
}

/* Quick View Modal Formatting */
.quickview-container {
 max-width: 780px;
}

.quickview-grid {
 display: grid;
 grid-template-columns: 1fr 1.1fr;
 gap: 2rem;
 align-items: center;
}

.quickview-media {
 border-radius: var(--radius-md);
 overflow: hidden;
 border: 1px solid var(--border-color);
 height: 320px;
}

.quickview-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* About Page Extras */
.about-text {
 color: var(--text-muted);
 font-size: 1rem;
 line-height: 1.7;
 margin-bottom: 1.25rem;
}

.about-badges-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.875rem;
 margin-top: 1.75rem;
}

.about-badge-item {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 font-size: 0.875rem;
 color: var(--text-main);
 font-weight: 600;
}

.about-badge-item i {
 color: var(--primary);
}

.footer-socials {
 display: flex;
 gap: 0.75rem;
 margin-top: 1rem;
}

.social-icon-btn {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid var(--border-color);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-main);
 font-size: 1.125rem;
 transition: all var(--transition-fast);
}

.social-icon-btn:hover {
 background: var(--primary);
 color: #FFF;
 transform: translateY(-2px);
}

@media (max-width: 768px) {
 .option-cards-grid {
 grid-template-columns: 1fr;
 }

 .instagram-photos-grid {
 grid-template-columns: repeat(2, 1fr);
 }

 .quickview-grid {
 grid-template-columns: 1fr;
 }

 .quickview-media {
 height: 240px;
 }

 .about-container {
 grid-template-columns: 1fr;
 }
}



/* V2 EXTRA STYLES: SEARCH, FAQ, URGENCY */
.hero-urgency-bar {
 display: flex;
 gap: 15px;
 margin-bottom: 20px;
 flex-wrap: wrap;
}

.urgency-chip {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(0, 166, 255, 0.3);
 padding: 6px 14px;
 border-radius: 30px;
 font-size: 0.85rem;
 color: var(--text-muted);
 display: inline-flex;
 align-items: center;
 gap: 8px;
 backdrop-filter: blur(10px);
}

.urgency-chip.pulse-red i {
 color: #FF5252;
 animation: pulse 1.5s infinite;
}

.catalog-search-container {
 max-width: 600px;
 margin: 0 auto 30px auto;
}

.search-input-wrapper {
 position: relative;
 display: flex;
 align-items: center;
}

.search-icon {
 position: absolute;
 left: 18px;
 color: var(--primary);
 font-size: 1.1rem;
}

#catalog-search-input {
 width: 100%;
 padding: 14px 45px 14px 50px;
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: 30px;
 color: var(--text-main);
 font-family: inherit;
 font-size: 0.95rem;
 transition: all 0.3s ease;
}

#catalog-search-input:focus {
 outline: none;
 border-color: var(--primary);
 box-shadow: 0 0 20px var(--primary-glow);
}

.clear-btn {
 position: absolute;
 right: 15px;
 background: none;
 border: none;
 color: var(--text-muted);
 cursor: pointer;
 display: none;

}

/* FAQ SECTION V2 */
.faq-section {
 background: var(--bg-dark);
 border-top: 1px solid var(--border-glass);
}

.faq-grid {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-top: 40px;
}

.faq-item {
 background: var(--bg-card);
 border: 1px solid var(--border-glass);
 border-radius: 12px;
 overflow: hidden;
 transition: all 0.3s ease;
}

.faq-item.active {
 border-color: var(--border-accent);
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.faq-question {
 width: 100%;
 padding: 20px 24px;
 background: none;
 border: none;
 color: var(--text-main);
 font-family: 'Outfit', sans-serif;
 font-weight: 600;
 font-size: 1.1rem;
 text-align: left;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;

}

.faq-icon {
 color: var(--primary);
 transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
 transform: rotate(180deg);
}

.faq-answer {
 max-height: 0;
 overflow: hidden;
 padding: 0 24px;
 transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
 max-height: 200px;
 padding: 0 24px 20px 24px;
}

.faq-answer p {
 color: var(--text-muted);
 line-height: 1.6;

}


/* FOOTER GRID FIX & LUXURY STYLING */
.footer-grid, .footer-container {
 display: grid !important;
 grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr !important;
 gap: 3rem !important;
 margin-bottom: 3rem !important;
 width: 100% !important;
}

.footer-brand-logo {
 height: 55px !important;
 width: auto !important;
 max-width: 220px !important;
 object-fit: contain !important;
 margin-bottom: 1.25rem !important;
 display: block !important;
}

.footer-col {
 display: flex !important;
 flex-direction: column !important;
}

.footer-col .footer-title,
.footer-col h4 {
 font-family: 'Outfit', sans-serif !important;
 font-size: 1.2rem !important;
 font-weight: 700 !important;
 color: #FFFFFF !important;
 margin-bottom: 1.25rem !important;
 position: relative !important;
 padding-bottom: 8px !important;
}

.footer-col .footer-title::after,
.footer-col h4::after {
 content: '' !important;
 position: absolute !important;
 left: 0 !important;
 bottom: 0 !important;
 width: 35px !important;
 height: 3px !important;
 background: var(--primary) !important;
 border-radius: 2px !important;
 box-shadow: 0 0 8px var(--primary-glow) !important;
}

.footer-links-list {
 list-style: none !important;
 padding: 0 !important;
 margin: 0 !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 12px !important;
}

.footer-links-list a {
 color: var(--text-muted) !important;
 text-decoration: none !important;
 font-size: 0.95rem !important;
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
 transition: all 0.3s ease !important;
}

.footer-links-list a:hover {
 color: var(--primary-hover) !important;
 transform: translateX(5px) !important;
}

.footer-contact-info {
 display: flex !important;
 flex-direction: column !important;
 gap: 14px !important;
}

.contact-item {
 display: flex !important;
 align-items: flex-start !important;
 gap: 12px !important;
 color: var(--text-muted) !important;
 font-size: 0.92rem !important;
}

.contact-item i {
 color: var(--primary) !important;
 font-size: 1.1rem !important;
 margin-top: 3px !important;
}

@media (max-width: 992px) {
 .footer-grid, .footer-container {
 grid-template-columns: 1fr 1fr !important;
 gap: 2.5rem !important;
 }
}

@media (max-width: 600px) {
 .footer-grid, .footer-container {
 grid-template-columns: 1fr !important;
 gap: 2rem !important;
 }
}


/* FIX FAQ SPACING & HEADER REORGANIZATION */
.faq-section {
 padding-top: 5rem !important;
 padding-bottom: 6rem !important;
 margin-bottom: 2rem !important;
 background: var(--bg-dark) !important;
}

.faq-grid {
 margin-bottom: 3.5rem !important;
}

/* HEADER BRAND TEXT LOGO & REORGANIZATION */
.header-container {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 width: 100% !important;
 max-width: 1280px !important;
 margin: 0 auto !important;
 padding: 0 24px !important;
 height: 80px !important;
}

.brand-text-logo {
 font-family: 'Outfit', sans-serif !important;
 font-size: 1.65rem !important;
 font-weight: 900 !important;
 letter-spacing: 1.5px !important;
 text-decoration: none !important;
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
}

.brand-name-light {
 color: #FFFFFF !important;
}

.brand-name-primary {
 color: var(--primary) !important;
 background: linear-gradient(135deg, #00D2FF 0%, #0066FF 50%, #0044FF 100%) !important;
 -webkit-background-clip: text !important;
 -webkit-text-fill-color: transparent !important;
}

.brand-badge-fabrica {
 font-size: 0.65rem !important;
 background: rgba(0, 166, 255, 0.15) !important;
 border: 1px solid var(--border-accent) !important;
 color: var(--primary-hover) !important;
 padding: 3px 8px !important;
 border-radius: 4px !important;
 letter-spacing: 0.5px !important;
 font-weight: 700 !important;
}

.nav-menu {
 display: flex !important;
 align-items: center !important;
 gap: 22px !important;
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
}

.nav-menu a {
 color: var(--text-main) !important;
 text-decoration: none !important;
 font-size: 0.92rem !important;
 font-weight: 600 !important;
 transition: all 0.3s ease !important;
 padding: 6px 0 !important;
 position: relative !important;
}

.nav-menu a:hover {
 color: var(--primary-hover) !important;
}

.header-actions {
 display: flex !important;
 align-items: center !important;
 gap: 16px !important;
}


/* HEADER TEXT SIZE & CLEAN ACTION AREA */
.nav-menu a, .nav-list a {
 font-size: 1.08rem !important;
 font-weight: 600 !important;
 letter-spacing: 0.3px !important;
}

.header-actions .social-icon-btn,
.header-actions .header-insta-btn,
.header-actions a[href*="instagram"] {
 display: none !important;
}

.btn-primary-glow i.fa-whatsapp {
 display: none !important;
}

/* PASSO 3 FORM STYLING */
.form-group-full {
 grid-column: 1 / -1;
}

.form-label span.optional-tag {
 font-size: 0.75rem;
 color: var(--text-muted);
 font-weight: 400;
 margin-left: 6px;
}


/* QUOTE SUMMARY CARD & STEP 4 STYLES */
.quote-summary-card {
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border-glass);
 border-radius: 14px;
 padding: 24px;
 margin: 24px 0 30px 0;
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.summary-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-item:last-child {
 border-bottom: none;
 padding-bottom: 0;
}

.summary-label {
 color: var(--text-muted);
 font-size: 0.92rem;
 display: flex;
 align-items: center;
 gap: 8px;
}

.summary-label i {
 color: var(--primary);
 font-size: 0.95rem;
}

.summary-value {
 color: #FFFFFF;
 font-weight: 600;
 font-size: 0.98rem;
 text-align: right;
}

.btn-whatsapp-submit {
 background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
 color: #FFFFFF !important;
 border: none !important;
 padding: 14px 28px !important;
 border-radius: 30px !important;
 font-family: 'Outfit', sans-serif !important;
 font-weight: 700 !important;
 font-size: 1.05rem !important;
 cursor: pointer !important;
 display: inline-flex !important;
 align-items: center !important;
 gap: 10px !important;
 box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35) !important;
 transition: all 0.3s ease !important;
}

.btn-whatsapp-submit:hover {
 transform: translateY(-2px) scale(1.02) !important;
 box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5) !important;
}


/* CLEAN TOP HEADER & ENLARGED MENU TEXT */
.header-actions {
 display: none !important;
}

.header .container,
.header .nav-container {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 height: 90px !important;
 padding: 0 32px !important;
 max-width: 1360px !important;
 margin: 0 auto !important;
}

.brand-text-logo {
 font-family: 'Outfit', sans-serif !important;
 font-size: 1.85rem !important;
 font-weight: 900 !important;
 letter-spacing: 1.5px !important;
}

.nav-menu, .nav-list {
 display: flex !important;
 align-items: center !important;
 gap: 28px !important;
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
}

.nav-menu a, .nav-list a, .nav-link {
 font-family: 'Outfit', sans-serif !important;
 font-size: 1.22rem !important;
 font-weight: 700 !important;
 color: #FFFFFF !important;
 text-decoration: none !important;
 letter-spacing: 0.5px !important;
 padding: 8px 12px !important;
 transition: all 0.3s ease !important;
}

.nav-menu a:hover, .nav-list a:hover, .nav-link:hover {
 color: var(--primary-hover) !important;
 transform: translateY(-2px) !important;
}

.nav-link.active {
 color: var(--primary) !important;
 border-bottom: 2px solid var(--primary) !important;
}


/* SINGLE LINE HORIZONTAL NAV FIX */
.brand-badge-fabrica {
 display: none !important;
}

.brand-text-logo {
 font-family: 'Outfit', sans-serif !important;
 font-size: 1.9rem !important;
 font-weight: 900 !important;
 letter-spacing: 1.5px !important;
 text-decoration: none !important;
 display: inline-flex !important;
 align-items: center !important;
}

.nav-menu, .nav-list {
 display: flex !important;
 align-items: center !important;
 justify-content: flex-end !important;
 gap: 32px !important;
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 flex-wrap: nowrap !important;
 white-space: nowrap !important;
}

.nav-link {
 font-family: 'Outfit', sans-serif !important;
 font-size: 1.15rem !important;
 font-weight: 700 !important;
 color: #FFFFFF !important;
 text-decoration: none !important;
 letter-spacing: 0.5px !important;
 white-space: nowrap !important;
 padding: 6px 0 !important;
 transition: all 0.3s ease !important;
}

.nav-link:hover {
 color: var(--primary-hover) !important;
 transform: translateY(-2px) !important;
}

.nav-link.active {
 color: var(--primary) !important;
 border-bottom: 2px solid var(--primary) !important;
}


/* MOBILE HAMBURGER & RESPONSIVE DRAWER STYLES */
.nav-toggle {
 display: none !important;
 background: rgba(255, 255, 255, 0.05) !important;
 border: 1px solid var(--border-glass) !important;
 color: #FFFFFF !important;
 font-size: 1.3rem !important;
 width: 46px !important;
 height: 46px !important;
 border-radius: 10px !important;
 cursor: pointer !important;
 align-items: center !important;
 justify-content: center !important;
 transition: all 0.3s ease !important;
 z-index: 1001 !important;
}

.nav-toggle:hover {
 background: var(--primary) !important;
 border-color: var(--primary-hover) !important;
}

.nav-overlay {
 position: fixed !important;
 top: 0 !important;
 left: 0 !important;
 width: 100vw !important;
 height: 100vh !important;
 background: rgba(8, 8, 10, 0.85) !important;
 backdrop-filter: blur(8px) !important;
 z-index: 998 !important;
 opacity: 0 !important;
 visibility: hidden !important;
 transition: all 0.3s ease !important;
}

.nav-overlay.active {
 opacity: 1 !important;
 visibility: visible !important;
}

@media (max-width: 880px) {
 .nav-toggle {
 display: flex !important;
 }

 .nav-menu {
 position: fixed !important;
 top: 0 !important;
 right: -100% !important;
 width: 290px !important;
 height: 100vh !important;
 background: #0D0D11 !important;
 border-left: 1px solid var(--border-accent) !important;
 flex-direction: column !important;
 align-items: flex-start !important;
 justify-content: flex-start !important;
 padding: 100px 32px 40px 32px !important;
 gap: 22px !important;
 z-index: 999 !important;
 transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
 box-shadow: -10px 0 35px rgba(0,0,0,0.9) !important;
 }

 .nav-menu.active {
 right: 0 !important;
 }

 .nav-list {
 flex-direction: column !important;
 align-items: flex-start !important;
 width: 100% !important;
 gap: 20px !important;
 }

 .nav-link {
 font-size: 1.25rem !important;
 width: 100% !important;
 padding: 8px 0 !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
 }
}

@media (max-width: 576px) {
 .header .container,
 .header .nav-container {
 padding: 0 16px !important;
 height: 75px !important;
 }

 .brand-text-logo {
 font-size: 1.6rem !important;
 }

 .hero-title {
 font-size: 2.1rem !important;
 }

 .hero-subtitle {
 font-size: 1.02rem !important;
 }

 .catalog-search-container {
 padding: 0 10px !important;
 }

 .product-grid {
 grid-template-columns: 1fr !important;
 }
}


/* LUXURY PROCESS TIMELINE GRID STYLES */
.process-section {
 background: var(--bg-dark);
 position: relative;
 border-top: 1px solid var(--border-glass);
}

.process-timeline-grid {
 display: grid !important;
 grid-template-columns: repeat(4, 1fr) !important;
 gap: 24px !important;
 margin-top: 50px !important;
 position: relative !important;
}

.process-card {
 background: var(--bg-card) !important;
 border: 1px solid var(--border-glass) !important;
 border-radius: 16px !important;
 padding: 32px 24px !important;
 position: relative !important;
 display: flex !important;
 flex-direction: column !important;
 justify-content: space-between !important;
 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.process-card:hover {
 transform: translateY(-10px) scale(1.02) !important;
 border-color: var(--border-accent) !important;
 box-shadow: 0 20px 40px rgba(0, 166, 255, 0.25) !important;
 background: #181820 !important;
}

.process-card-header {
 display: flex !important;
 justify-content: space-between !important;
 align-items: center !important;
 margin-bottom: 20px !important;
}

.process-number {
 font-family: 'Outfit', sans-serif !important;
 font-size: 2.5rem !important;
 font-weight: 900 !important;
 color: var(--primary) !important;
 line-height: 1 !important;
 background: linear-gradient(135deg, #00D2FF 0%, #0066FF 50%, #0044FF 100%) !important;
 -webkit-background-clip: text !important;
 -webkit-text-fill-color: transparent !important;
}

.process-icon-box {
 width: 54px !important;
 height: 54px !important;
 border-radius: 14px !important;
 background: rgba(0, 166, 255, 0.12) !important;
 border: 1px solid var(--border-accent) !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 color: var(--primary-hover) !important;
 font-size: 1.4rem !important;
 transition: all 0.3s ease !important;
}

.process-card:hover .process-icon-box {
 background: var(--primary) !important;
 color: #FFFFFF !important;
 box-shadow: 0 0 20px var(--primary-glow) !important;
 transform: rotate(6deg) scale(1.1) !important;
}

.process-title {
 font-family: 'Outfit', sans-serif !important;
 font-size: 1.25rem !important;
 font-weight: 700 !important;
 color: #FFFFFF !important;
 margin-bottom: 12px !important;
 line-height: 1.3 !important;
}

.process-desc {
 color: var(--text-muted) !important;
 font-size: 0.93rem !important;
 line-height: 1.6 !important;
 margin-bottom: 20px !important;
}

.process-tag {
 align-self: flex-start !important;
 font-size: 0.75rem !important;
 font-weight: 700 !important;
 text-transform: uppercase !important;
 letter-spacing: 0.8px !important;
 background: rgba(255, 255, 255, 0.05) !important;
 border: 1px solid var(--border-glass) !important;
 color: var(--primary-hover) !important;
 padding: 4px 12px !important;
 border-radius: 20px !important;
}

@media (max-width: 1024px) {
 .process-timeline-grid {
 grid-template-columns: repeat(2, 1fr) !important;
 }
}

@media (max-width: 600px) {
 .process-timeline-grid {
 grid-template-columns: 1fr !important;
 }
}


/* BRAND IMAGE LOGO STYLES */
.brand-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: transform 0.3s ease !important;
}

.brand-logo-link:hover {
  transform: scale(1.04) !important;
}

.brand-logo-img {
  height: 48px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 576px) {
  .brand-logo-img {
    height: 38px !important;
  }
}


/* RIGOROUS HEADER LOGO SIZE FIX */
.header .brand-logo-link,
.brand-logo-link {
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  max-height: 48px !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.header .brand-logo-img,
.brand-logo-img,
header img.brand-logo-img,
.nav-container img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 576px) {
  .header .brand-logo-link,
  .brand-logo-link {
    height: 38px !important;
    max-height: 38px !important;
  }
  .header .brand-logo-img,
  .brand-logo-img,
  header img.brand-logo-img,
  .nav-container img {
    height: 38px !important;
    max-height: 38px !important;
    max-width: 140px !important;
  }
}