/* ============================================
   Rotafar Empresas - Estilos Específicos
   ============================================ */

/* Sobrescrevendo a paleta de cores para um tom mais sério (Grafite/Azul Metálico) */
:root {
  --preto: #0B0E14;      /* Fundo principal mais frio */
  --preto-2: #121820;    /* Fundos secundários */
  --preto-3: #1A222D;
  --vinho: #10161D;      /* Seção contato/footer */
  --vinho-deep: #080A0F;
  --creme: #F0F4F8;      /* Textos claros, mais brancos */
  --creme-2: #161D27;    /* Seção alt fica escura também, modo dark puro */
  --branco: #FFFFFF;
}

/* Modificação no Hero */
.hero {
  /* Adiciona uma grade sutil de tecnologia ao fundo */
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
}

/* Cards B2B - Dark Glassmorphism */
.section {
  background: var(--preto);
}
.section-alt {
  background: var(--preto-2);
}

.card, .step {
  background: rgba(30, 41, 59, 0.4); /* Fundo vidro escuro */
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  color: var(--creme);
}

.card h3 {
  color: var(--amarelo); /* Destaque no título */
}

.card p {
  color: rgba(240, 244, 248, 0.7); /* Texto sutil */
}

.card-icon {
  background: rgba(255, 212, 0, 0.1);
  color: var(--amarelo);
}

/* Títulos Escuros nas seções claras antigas agora precisam ser claros */
.section-title {
  color: var(--branco);
}
.section-lead {
  color: rgba(240, 244, 248, 0.7);
}
.section-eyebrow {
  color: var(--amarelo);
}

/* Passos (Como Funciona) B2B */
.step-num {
  background: transparent;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--amarelo);
  opacity: 1;
}
.step h3 {
  color: var(--branco);
}
.step p {
  color: rgba(240, 244, 248, 0.7);
}
.steps::before {
  background: linear-gradient(to bottom, var(--amarelo), transparent);
}

/* Ajustes no Contato (que antes era vinho, agora é slate deep) */
.contact {
  background: var(--preto-3);
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Link ativo na nav */
.nav-links a.active {
  color: var(--amarelo);
  font-weight: 600;
}