/* ============================================================
   SMART MEI — styles.css (Versão Refinada — Grafite Petróleo + Família Source)
   ============================================================ */

:root {
  --color-petrol:       #006666;
  --color-petrol-dark:  #004d4d;
  --color-coral:        #FF7F50;
  --color-coral-dark:   #e06030;
  --color-dark:         #0f1f1f;   /* grafite-petróleo profundo — substitui o preto puro */
  --color-surface:      #172828;   /* superfície com leve tom petróleo */
  --color-surface-2:    #1e3333;   /* camada elevada, cards e painéis */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-dark);
  color: #d1e8e8;   /* texto ligeiramente azulado — mais suave que branco puro */
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
}


/* ============================================================
   ACESSIBILIDADE & SCROLL
   ============================================================ */

/* Compensa o header fixo (96px) nos anchors de navegação */
section[id] {
  scroll-margin-top: 96px;
}

/* Focus visible para navegação por teclado — acessibilidade WCAG AA */
*:focus-visible {
  outline: 2px solid #FF7F50;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduz animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   HEADER
   ============================================================ */
#header {
  background-color: #ffffff !important;
  box-shadow: 0 1px 12px rgba(0, 102, 102, 0.10);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-coral);
  transition: width var(--transition-base);
}

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

/* ============================================================
   HERO & ANIMAÇÕES
   ============================================================ */
#hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f1f1f 0%, #0d2626 50%, #0f1f1f 100%);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

#hero img.opacity-\[0\.03\] {
  animation: float 10s ease-in-out infinite;
}

.service-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   QR CODE
   ============================================================ */
#qrcode-container img {
  margin: 0 auto;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.watermark-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background-image: url('logo.svg');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.03;
  pointer-events: none;
}

/* ============================================================
   GRADIENTES SUTIS NAS SEÇÕES
   ============================================================ */
#sobre {
  background: linear-gradient(180deg, #0f1f1f 0%, #0d2424 100%);
}

#servicos {
  background: linear-gradient(180deg, #0d2424 0%, #0f1f1f 100%);
}

#depoimentos {
  background: linear-gradient(180deg, #172828 0%, #1a2e2e 100%);
}

#planos {
  background: linear-gradient(180deg, #0f1f1f 0%, #0d2020 100%);
}

#contato {
  background: linear-gradient(180deg, #0d2020 0%, #0f1f1f 100%);
}