:root {
    --primary: #007cf0;
    --accent: #ff4d4d;
    --bg-dark: #050505;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }

body { background: var(--bg-dark); color: white; overflow-x: hidden; }

/* Esferas de Fundo */
.bg-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.gradient-sphere { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.2; }
.sphere-1 { width: 500px; height: 500px; background: var(--primary); top: -10%; right: -10%; }
.sphere-2 { width: 400px; height: 400px; background: var(--accent); bottom: -10%; left: -10%; }

/* Header */
.main-content { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }
.hero-section { text-align: center; margin-bottom: 60px; }
.logo-img { height: 60px; margin-bottom: 20px; }
h1 { font-size: 3.5rem; font-weight: 900; letter-spacing: -2px; line-height: 1; }
h1 span { background: linear-gradient(90deg, #fff, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { color: #888; margin-top: 10px; font-size: 1.1rem; }

/* Grid de Produtos */
.products-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.card-inner { 
    background: var(--glass); border: 1px solid var(--glass-border); 
    padding: 40px; border-radius: 30px; text-align: center;
    backdrop-filter: blur(10px); transition: 0.4s;
}
.card-inner:hover { transform: translateY(-10px); border-color: var(--primary); background: rgba(255,255,255,0.06); }
.icon-product { font-size: 2.5rem; margin-bottom: 20px; }
.gas .icon-product { color: var(--accent); }
.water .icon-product { color: var(--primary); }
.price { font-size: 2.5rem; font-weight: 800; margin: 10px 0; }

/* SEÇÃO DO MAPA (Organizada) */
.map-section { margin-top: 40px; }
.map-card { 
    background: var(--glass); border: 1px solid var(--glass-border); 
    border-radius: 40px; overflow: hidden; backdrop-filter: blur(15px);
}
.map-info { 
    padding: 30px; display: flex; justify-content: space-around; 
    border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,0.02);
}
.info-block { display: flex; align-items: center; gap: 15px; }
.info-block i { font-size: 1.5rem; color: var(--primary); }
.info-block h4 { font-size: 0.9rem; color: #fff; }
.info-block p { font-size: 0.8rem; color: #888; }

.map-frame { height: 400px; width: 100%; filter: invert(90%) hue-rotate(180deg) brightness(0.7); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Botão WhatsApp */
.whatsapp-fixed {
    position: fixed; bottom: 30px; right: 30px; 
    background: white; color: black; padding: 18px 30px; 
    border-radius: 100px; font-weight: 800; text-decoration: none;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 999;
    transition: 0.3s;
}
.whatsapp-fixed:hover { transform: scale(1.05); background: #25D366; color: white; }

/* Responsividade */
@media (max-width: 768px) {
    .products-container { grid-template-columns: 1fr; }
    .map-info { flex-direction: column; gap: 20px; }
    h1 { font-size: 2.5rem; }
    .whatsapp-fixed { left: 20px; right: 20px; text-align: center; justify-content: center; }
}