/* Custom Design System for RGM Energia Solar - Modern Solar Cyan / Deep Blue Theme */
:root {
  --color-brand-primary: #F59E0B;
  --color-brand-secondary: #FBBF24;
  --color-brand-cyan: #00D2FF;
  --color-brand-blue: #0284C7;
  --color-bg-dark: #07111E;
  --color-bg-surface: #0E2238;
  --color-bg-card: rgba(16, 37, 65, 0.75);
  --color-border-glow: rgba(0, 210, 255, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #07111E;
}
::-webkit-scrollbar-thumb {
  background: #1E3E62;
  border-radius: 5px;
  border: 2px solid #07111E;
}
::-webkit-scrollbar-thumb:hover {
  background: #00D2FF;
}

/* Text Selection */
::selection {
  background: #00D2FF;
  color: #07111E;
}

/* Glassmorphism Header */
.glass-header {
  background: rgba(7, 17, 30, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 210, 255, 0.15);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-header.scrolled {
  background: rgba(7, 17, 30, 0.98);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 210, 255, 0.15);
  border-bottom: 1px solid rgba(0, 210, 255, 0.3);
}

/* Hero Background Slide Transitions */
.hero-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 8s ease-out;
  pointer-events: none;
}
.hero-slide-bg.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Glass Card */
.glass-card {
  background: rgba(14, 34, 58, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 210, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  border-color: rgba(0, 210, 255, 0.5);
  box-shadow: 0 15px 35px -10px rgba(0, 210, 255, 0.25), 0 0 25px rgba(245, 158, 11, 0.15);
  transform: translateY(-4px);
}

/* Glowing Neon Borders & Badges */
.glow-gold {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35);
}
.glow-cyan {
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.4);
}
.text-glow-gold {
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.6), 0 0 40px rgba(245, 158, 11, 0.3);
}
.text-glow-cyan {
  text-shadow: 0 0 20px rgba(0, 210, 255, 0.6), 0 0 40px rgba(0, 210, 255, 0.3);
}

/* Strong Text Relief for High Readability */
.text-relief {
  text-shadow: 0 4px 25px rgba(0, 0, 0, 0.98), 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 0, 0, 0.9);
}
.text-relief-title {
  text-shadow: 0 5px 30px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 210, 255, 0.25);
}

/* Primary CTA Button */
.btn-solar {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
  color: #07111E;
  font-weight: 800;
  transition: all 0.35s ease;
  box-shadow: 0 6px 25px rgba(245, 158, 11, 0.45);
  position: relative;
  overflow: hidden;
}
.btn-solar::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
  transform: rotate(30deg);
  transition: all 0.75s ease;
}
.btn-solar:hover::after {
  left: 120%;
}
.btn-solar:hover {
  background: linear-gradient(135deg, #FEF08A 0%, #FBBF24 50%, #EA580C 100%);
  box-shadow: 0 8px 35px rgba(245, 158, 11, 0.7), 0 0 20px rgba(0, 210, 255, 0.4);
  transform: translateY(-2px) scale(1.02);
}

/* Cyan Action Button */
.btn-cyan {
  background: linear-gradient(135deg, #38BDF8 0%, #00D2FF 50%, #0284C7 100%);
  color: #07111E;
  font-weight: 800;
  transition: all 0.35s ease;
  box-shadow: 0 6px 25px rgba(0, 210, 255, 0.4);
}
.btn-cyan:hover {
  background: linear-gradient(135deg, #BAE6FD 0%, #38BDF8 50%, #0369A1 100%);
  box-shadow: 0 8px 35px rgba(0, 210, 255, 0.65);
  transform: translateY(-2px) scale(1.02);
}

/* WhatsApp Floating Button */
.btn-whatsapp-float {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.45);
  animation: pulse-whatsapp 2.5s infinite;
}
@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Range Slider Styling */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: #1E3E62;
  height: 8px;
  border-radius: 4px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00D2FF, #0284C7);
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.8), 0 0 0 4px rgba(7, 17, 30, 0.9);
  transition: transform 0.15s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Shared layout safeguards for small screens and touch devices. */
html { scroll-padding-top: 84px; }
img, video { max-width: 100%; }
button, a { touch-action: manipulation; }
.glass-card, .btn-solar, .btn-cyan { -webkit-tap-highlight-color: transparent; }

@media (max-width: 640px) {
  body { min-width: 320px; }
  #mobileMenu { max-width: 100vw; max-height: 100dvh; overflow-y: auto; }
  .hero-slide-bg { transform: none; }
  .hero-slide-bg.active { transform: none; }
  .glass-card:hover, .btn-solar:hover, .btn-cyan:hover { transform: none; }
  .btn-whatsapp-float { animation: none; }
  input:not([type=range]), select, textarea { font-size: 16px; }
  footer { overflow-wrap: anywhere; }
  footer .flex.items-center.justify-center { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Official logo with transparent background. */
.rgm-logo { background: transparent; border-radius: 0; padding: 0; box-shadow: none; object-fit: contain; flex-shrink: 0; }
#mainHeader .rgm-logo { width: 160px; height: auto; }
#mainHeader > div { gap: 24px; }
@media (min-width: 1024px) and (max-width: 1279px) { #mainHeader nav { gap: 12px; font-size: 12px; } #mainHeader > div > div.hidden { display:none; } }
@media (max-width: 639px) { #mainHeader .rgm-logo { width: 140px; } }


@media(max-width:768px){body .mb-brand-footer{padding:10px 16px!important;min-height:0!important;height:auto!important;flex:0 0 auto!important}body .mb-brand-footer a,body .mb-brand-footer span{font-size:11px!important}}