/* RUANTECH - CSS Unificado
   Última atualização: Maio 2025
*/

/* ===== VARIÁVEIS GLOBAIS ===== */
:root {
  /* Cores principais */
  --cor-primaria: #14294F !important;      /* Azul escuro institucional */
  --cor-primaria-dark: #0A1A36 !important; /* Azul escuro mais intenso */
  --cor-secundaria: #F39200 !important;    /* Laranja institucional */
  --cor-secundaria-dark: #D17800 !important; /* Laranja mais intenso */
  
  /* Tons neutros */
  --cor-branco: #FFFFFF !important;
  --cor-cinza-claro: #f9fafb !important;
  --cor-cinza-medio: #6b7280 !important;
  --cor-cinza-escuro: #4b5563 !important;
  --cor-preto: #0A1220 !important;
  
  /* Cores funcionais */
  --cor-sucesso: #10b981 !important;       /* Verde para ações positivas */
  --cor-info: #3b82f6 !important;          /* Azul para informações */
  --cor-aviso: #f59e0b !important;         /* Amarelo para avisos */
  --cor-perigo: #ef4444 !important;        /* Vermelho para erros/alertas */
  --cor-whatsapp: #25D366 !important;      /* Verde WhatsApp */
  
  /* Gradientes */
  --gradiente-primario: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-dark) 100%) !important;
  --gradiente-secundario: linear-gradient(135deg, var(--cor-secundaria) 0%, var(--cor-secundaria-dark) 100%) !important;
  --gradiente-claro: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%) !important;
  
  /* Tipografia */
  --font-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  --font-secundaria: 'Poppins', sans-serif !important;
  
  /* Bordas e sombras */
  --borda-radius-sm: 4px !important;
  --borda-radius-md: 8px !important;
  --borda-radius-lg: 16px !important;
  --borda-radius-xl: 24px !important;
  --borda-radius-pill: 50px !important;
  
  --sombra-sm: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  --sombra-md: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  --sombra-lg: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
  --sombra-xl: 0 20px 25px rgba(0, 0, 0, 0.15) !important;
  
  
  --container-max: 1320px !important;
  
  /* Transições */
  --transition-padrao: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  --transition-lenta: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  --transition-rapida: all 0.2s ease !important;
}

/* ===== RESET E ESTILOS BASE ===== */
* {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  font-family: var(--font-principal) !important;
  font-size: 16px !important;
  color: var(--cor-cinza-escuro) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  scroll-behavior: smooth !important;
}

body {
  position: relative !important;
  min-height: 100vh !important;
  background-color: var(--cor-branco) !important;
  line-height: 1.6 !important;
}

a {
  color: white !important;
  text-decoration: none !important;
  transition: var(--transition-padrao) !important;
}

a:hover {
  color: var(--cor-primaria) !important;
}

img, svg {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ===== TIPOGRAFIA ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secundaria) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  
  margin-bottom: 0.5em !important;
}

h1, .h1 { font-size: 3rem !important; }
h2, .h2 { font-size: 2.5rem !important; }
h3, .h3 { font-size: 2rem !important; }
h4, .h4 { font-size: 1.5rem !important; }
h5, .h5 { font-size: 1.25rem !important; }
h6, .h6 { font-size: 1rem !important; }

p {
  margin-bottom: 1rem !important;
}

.display-1 { font-size: 5rem !important; font-weight: 800 !important; }
.display-2 { font-size: 4.5rem !important; font-weight: 800 !important; }
.display-3 { font-size: 4rem !important; font-weight: 800 !important; }
.display-4 { font-size: 3.5rem !important; font-weight: 800 !important; }
.display-5 { font-size: 3rem !important; font-weight: 700 !important; }
.display-6 { font-size: 2.5rem !important; font-weight: 700 !important; }

.lead {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
}


.text-secondary { color: var(--cor-secundaria) !important; }
.text-white { color: var(--cor-branco) !important; }
.text-dark { color: var(--cor-preto) !important; }

.bg-primary { background-color: var(--cor-primaria) !important; }
.bg-secondary { background-color: var(--cor-secundaria) !important; }
.bg-white { background-color: var(--cor-branco) !important; }
.bg-light { background-color: var(--cor-cinza-claro) !important; }
.bg-dark { background-color: var(--cor-preto) !important; }

.bg-gradient-primary { 
  background: var(--gradiente-primario) !important; 
}

.bg-gradient-secondary { 
  background: var(--gradiente-secundario) !important; 
}

/* ===== LAYOUT E CONTAINERS ===== */
.container, .container-fluid {
  width: 100% !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.container {
  max-width: var(--container-max) !important;
}

.section-padding {
  padding: 100px 0 !important;
}

.section-margin {
  margin: 100px 0 !important;
}

@media (max-width: 992px) {
  .section-padding {
    padding: 70px 0 !important;
  }
  
  .section-margin {
    margin: 70px 0 !important;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding: 50px 0 !important;
  }
  
  .section-margin {
    margin: 50px 0 !important;
  }
}

/* ===== UTILITÁRIOS ===== */
.py-7 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-8 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
.py-9 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
.py-10 { padding-top: 12rem !important; padding-bottom: 12rem !important; }

.pt-7 { padding-top: 6rem !important; }
.pt-8 { padding-top: 8rem !important; }
.pt-9 { padding-top: 10rem !important; }
.pt-10 { padding-top: 12rem !important; }

.pb-7 { padding-bottom: 6rem !important; }
.pb-8 { padding-bottom: 8rem !important; }
.pb-9 { padding-bottom: 10rem !important; }
.pb-10 { padding-bottom: 12rem !important; }

.my-7 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.my-8 { margin-top: 8rem !important; margin-bottom: 8rem !important; }
.my-9 { margin-top: 10rem !important; margin-bottom: 10rem !important; }
.my-10 { margin-top: 12rem !important; margin-bottom: 12rem !important; }

.mt-7 { margin-top: 6rem !important; }
.mt-8 { margin-top: 8rem !important; }
.mt-9 { margin-top: 10rem !important; }
.mt-10 { margin-top: 12rem !important; }

.mb-7 { margin-bottom: 6rem !important; }
.mb-8 { margin-bottom: 8rem !important; }
.mb-9 { margin-bottom: 10rem !important; }
.mb-10 { margin-bottom: 12rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.shadow-sm { box-shadow: var(--sombra-sm) !important; }
.shadow { box-shadow: var(--sombra-md) !important; }
.shadow-lg { box-shadow: var(--sombra-lg) !important; }
.shadow-xl { box-shadow: var(--sombra-xl) !important; }

.rounded-sm { border-radius: var(--borda-radius-sm) !important; }
.rounded { border-radius: var(--borda-radius-md) !important; }
.rounded-lg { border-radius: var(--borda-radius-lg) !important; }
.rounded-xl { border-radius: var(--borda-radius-xl) !important; }
.rounded-pill { border-radius: var(--borda-radius-pill) !important; }

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }

.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-max { z-index: 9999 !important; }



/* ===== COMPONENTES - CAROSSEL DE SERVIÇOS ===== */
#carrosselServicos {
  flex-direction: column !important;
  display: flex !important;
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: 520px !important;
  z-index: 1 !important;
  background-color: #f9fbfc !important;
  margin-top: 5px !important;
}

#particles-js {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 520px !important;
  background: linear-gradient(to right, #f9fbfc, #e8f0f6) !important;
  z-index: 0 !important;
}

.carousel-item {
  display: flex !important;
  flex-direction: column !important;
  color: #333 !important;
  padding: 20px 15px !important;
  transition: opacity 0.8s ease-in-out !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 100% !important;
  margin-bottom: 30% !important;
}

.carousel-item.active {
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

.titulo,
.descricao {
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
}

.carousel-item.active .titulo,
.carousel-item.active .descricao {
  opacity: 1 !important;
}

.floating-icon {
  animation: float 3s ease-in-out infinite !important;
}

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

.titulo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  text-align: center !important;
  margin: 10px 0 !important;
  font-size: 2.2rem !important;
  font-weight: bold !important;
  color: var(--cor-secundaria) !important;
}

.icone-slide {
  margin-left: 15px !important;
  width: 50px !important;
  height: 50px !important;
  filter: drop-shadow(0 0 4px var(--cor-info)) !important;
}

.descricao {
  font-size: 1.2rem !important;
  max-width: 700px !important;
  line-height: 1.6 !important;
  color: #444 !important;
  text-align: center !important;
  margin: 1rem auto !important;
}

.veja-final {
  margin-top: 1rem !important;
  font-size: 1.1rem !important;
  color: #666 !important;
  text-align: center !important;
  animation: fadeInUp 1s ease 0.5s both !important;
}

.typing-effect {
  display: inline-block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border-right: 2px solid var(--cor-secundaria) !important;
  font-weight: bold !important;
  color: var(--cor-secundaria) !important;
  animation: typing 3s steps(20, end), blink-caret 0.75s step-end infinite !important;
}

@keyframes typing {
  from { width: 0 !important; }
  to   { width: 12.5em !important; }
}

@keyframes blink-caret {
  0%, 100% { border-color: transparent !important; }
  50%      { border-color: var(--cor-secundaria) !important; }
}

.highlight {
  color: var(--cor-info) !important;
  font-weight: bold !important;
  transition: all 0.4s ease !important;
}

.contato-e-indicadores-wrapper {
  position: relative !important;
  padding: 20px !important;
  background-color: transparent !important;
  z-index: 10 !important;
  text-align: center !important;
  bottom: 0 !important;
}


/* Estilos para o botão fixo de contato com mesmo estilo do botão WhatsApp */
.btn-contato-fixo {
  position: sticky !important;
  bottom: 0 !important;
  background-color: transparent !important;
  padding: 15px 10px 10px !important;
  z-index: 20 !important;
  text-align: center !important;
}

.btn-contato-fixo a {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  /* Mesma cor do botão WhatsApp */
  padding: 16px 32px !important;
  /* Mesmo padding do botão WhatsApp */
  border-radius: 50px !important;
  /* Mesmo border-radius do botão WhatsApp */
  color: white !important;
  font-weight: 600 !important;
  /* Mesmo font-weight do botão WhatsApp */
  text-decoration: none !important;
  display: inline-flex !important;
  /* inline-flex para alinhar ícone e texto */
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  /* Mesmo gap do botão WhatsApp */
  font-size: 1.05rem !important;
  /* Mesmo font-size do botão WhatsApp */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  /* Mesma sombra do botão WhatsApp */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  /* Mesma transição do botão WhatsApp */
  transform: translateY(0) !important;
  letter-spacing: 0.5px !important;
  min-width: 200px !important;
}

.btn-contato-fixo a:hover {
  background: linear-gradient(135deg, #22c35e, #107869) !important;
  /* Mesmo hover do botão WhatsApp */
  transform: translateY(-5px) !important;
  /* Mesmo efeito hover do botão WhatsApp */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
  /* Mesma sombra hover do botão WhatsApp */
}

/* Adiciona efeito de pulso igual ao do botão WhatsApp */
.btn-contato-fixo a.pulsando {
  animation: ruantechPulse 2s infinite !important;
}

/* Se o keyframe não existir no CSS principal, adicione-o aqui */
@keyframes ruantechPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7) !important;
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0) !important;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0) !important;
  }
}

/* Estilo para o ícone dentro do botão, se houver */
.btn-contato-fixo a i {
  font-size: 1.3rem !important;
  /* Mesmo tamanho de ícone do botão WhatsApp */
}

/* Estilo para o texto do subtítulo */
.btn-contato-fixo .subtexto {
  color: #666 !important;
  font-size: 0.85rem !important;
  margin-top: 5px !important;
  display: block !important;
  text-align: center !important;
}

/* Adaptação para telas menores */
@media (max-width: 768px) {
  .btn-contato-fixo a {
    padding: 14px 20px !important;
    font-size: 1rem !important;
    width: 100% !important;
  }
}







.indicador-carrossel-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 15px !important;
  gap: 8px !important;
}

.indicador-seta {
  background: none !important;
  border: none !important;
  font-size: 2rem !important;
  color: var(--cor-info) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 0.3s ease !important;
}

.indicador-seta:hover {
  color: #4dd0e1 !important;
}

.numeric-indicators-wrapper {
  overflow-x: auto !important;
  white-space: nowrap !important;
  padding: 5px 0 !important;
  scroll-behavior: smooth !important;
  max-width: 80% !important;
}

.numeric-indicators {
  display: inline-flex !important;
  gap: 8px !important;
  padding: 0 10px !important;
}

.numeric-indicators button {
  background-color: #222 !important;
  border: 1px solid var(--cor-info) !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.numeric-indicators button.active {
  background-color: var(--cor-info) !important;
  color: #000 !important;
  transform: scale(1.1) !important;
  font-weight: bold !important;
}

/* ===== COMPONENTES - CARDS E SERVIÇOS ===== */
.ruan-services-section,
.services-section {
  background-color: #f9fafb !important;
  background-image: linear-gradient(to bottom, #f9fafb, #f0f5ff) !important;
  padding: 80px 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.ruan-services-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 40% !important;
  height: 40% !important;
  background: radial-gradient(circle, rgba(20, 41, 79, 0.05) 0%, rgba(20, 41, 79, 0) 70%) !important;
  z-index: 0 !important;
}

.ruan-services-section::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 40% !important;
  height: 40% !important;
  background: radial-gradient(circle, rgba(243, 146, 0, 0.05) 0%, rgba(243, 146, 0, 0) 70%) !important;
  z-index: 0 !important;
}

.section-title {
  font-size: 2.5rem !important;
  text-align: center !important;
  margin-bottom: 2.5rem !important;
  color: var(--cor-primaria) !important;
  font-weight: 800 !important;
  position: relative !important;
  z-index: 2 !important;
}

.section-title:after {
  content: "" !important;
  display: block !important;
  width: 80px !important;
  height: 4px !important;
  background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria)) !important;
  margin: 15px auto 0 !important;
  border-radius: 2px !important;
}

.badge.bg-primary-subtle {
  background-color: rgba(20, 41, 79, 0.1) !important;
  color: var(--cor-primaria) !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 3px 6px rgba(20, 41, 79, 0.1) !important;
}

.ruan-service-card {
  margin-top: 150px !important;
  margin: auto !important;
  position: relative !important;
  background: var(--cor-branco) !important;
  padding: 120px 25px 40px !important;
  border-radius: 30px !important;
  box-shadow: 0 15px 35px rgba(10, 30, 63, 0.1) !important;
  overflow: visible !important;
  text-align: center !important;
  transition: var(--transition-lenta) !important;
  border: 2px solid var(--cor-secundaria) !important;
  width: 100% !important;
  max-width: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  z-index: 2 !important;
}

.ruan-service-card:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 25px 50px rgba(10, 30, 63, 0.15) !important;
  border-color: var(--cor-primaria) !important;
}

.ruan-service-card:hover .tech-heading {
  color: var(--cor-secundaria) !important;
}

.image-box {
  margin-bottom: 30px !important;
  width: 100% !important;
  max-width: 100% !important;
  position: absolute !important;
  top: -180px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  transition: var(--transition-lenta) !important;
}

.ruan-service-card:hover .image-box {
  transform: translateX(-50%) translateY(-10px) !important;
}

.image-box img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.2)) !important;
  transition: var(--transition-lenta) !important;
}

.service-card {
  background-color: var(--cor-branco) !important;
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: var(--transition-lenta) !important;
  height: 100% !important;
  box-shadow: 0 10px 30px rgba(10, 30, 63, 0.08) !important;
  position: relative !important;
  z-index: 2 !important;
}

.service-card:hover {
  transform: translateY(-15px) !important;
  box-shadow: 0 20px 40px rgba(10, 30, 63, 0.15) !important;
}

.service-card::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 5px !important;
  background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: var(--transition-lenta) !important;
}

.service-card:hover::after {
  transform: scaleX(1) !important;
}

.card-img-container {
  background-color: #f9fafb !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  position: relative !important;
}

.card-img-container::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(20, 41, 79, 0.05) 0%, rgba(243, 146, 0, 0.05) 100%) !important;
  z-index: 1 !important;
}

.card-img-top {
  height: 230px !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 2 !important;
  transition: var(--transition-lenta) !important;
}

.service-card:hover .card-img-top {
  transform: scale(1.05) !important;
}

.tech-heading,
.card-body h4 {
  font-size: 1.5rem !important;
  color: var(--cor-primaria) !important;
  margin-top: 10px !important;
  margin-bottom: 16px !important;
  font-weight: 700 !important;
  transition: color 0.3s ease !important;
}

.tech-description,
.card-text {
  font-size: 1.05rem !important;
  color: #555 !important;
  line-height: 1.7 !important;
  margin-bottom: 1.5rem !important;
}

.list-unstyled {
  text-align: left !important;
  margin-bottom: 1.5rem !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.list-unstyled li {
  padding: 8px 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
}

.list-unstyled li i {
  color: var(--cor-secundaria) !important;
  font-size: 1.1rem !important;
  margin-top: 2px !important;
  margin-right: 10px !important;
}

.list-unstyled li span {
  margin-left: 10px !important;
  font-size: 0.95rem !important;
  color: #444 !important;
  line-height: 1.5 !important;
}

/* ===== BOTÕES E ELEMENTOS INTERATIVOS - VERSÃO LARANJA ===== */
.btn-primary,
.service-card .btn-primary {
  /* Gradiente laranja em vez de azul */
  background: linear-gradient(135deg, #F39200, #F9A825) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
  /* Sombra adaptada para cor laranja */
  box-shadow: 0 5px 15px rgba(243, 146, 0, 0.3) !important;
  transition: var(--transition-lenta) !important;
  position: relative !important;
  overflow: hidden !important;
  color: var(--cor-branco) !important;
}

.btn-primary:hover,
.service-card .btn-primary:hover {
  /* Efeito hover com laranja mais escuro */
  background: linear-gradient(135deg, #E58300, #E59100) !important;
  transform: translateY(-3px) !important;
  /* Sombra hover adaptada para cor laranja */
  box-shadow: 0 8px 25px rgba(243, 146, 0, 0.4) !important;
  color: var(--cor-branco) !important;
}

.btn-primary::after,
.service-card .btn-primary::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%) !important;
  transition: all 0.5s ease !important;
}

.btn-primary:hover::after,
.service-card .btn-primary:hover::after {
  left: 100% !important;
}

/* ===== VERSÃO ALTERNATIVA CASO ESTEJA USANDO VARIÁVEIS CSS ===== */
/* Se quiser garantir que as variáveis CSS sejam utilizadas, descomente o código abaixo
   e comente o primeiro bloco acima */

/*
.btn-primary,
.service-card .btn-primary {
  background: linear-gradient(135deg, var(--cor-secundaria), #F9A825) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
  box-shadow: 0 5px 15px rgba(var(--cor-secundaria-rgb, 243, 146, 0), 0.3) !important;
  transition: var(--transition-lenta) !important;
  position: relative !important;
  overflow: hidden !important;
  color: var(--cor-branco) !important;
}

.btn-primary:hover,
.service-card .btn-primary:hover {
  background: var(--cor-secundaria-escura, #E58300) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(var(--cor-secundaria-rgb, 243, 146, 0), 0.4) !important;
  color: var(--cor-branco) !important;
}
*/

.btn-secondary {
  background-color: var(--cor-secundaria) !important;
  color: var(--cor-branco) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 5px 15px rgba(243, 146, 0, 0.2) !important;
  transition: var(--transition-lenta) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-secondary:hover {
  background-color: var(--cor-secundaria-dark) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(243, 146, 0, 0.3) !important;
  color: var(--cor-branco) !important;
}

.btn-success {
  background-color: var(--cor-whatsapp) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 30px !important;
  font-weight: 600 !important;
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3) !important;
  transition: var(--transition-lenta) !important;
  color: var(--cor-branco) !important;
}

.btn-success:hover {
  background-color: #20BD5C !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;
  color: var(--cor-branco) !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  border: 2px solid var(--cor-primaria) !important;
  color: var(--cor-primaria) !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  transition: var(--transition-padrao) !important;
}

.btn-outline-primary:hover {
  background-color: var(--cor-primaria) !important;
  color: var(--cor-branco) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 15px rgba(20, 41, 79, 0.2) !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  border: 2px solid var(--cor-secundaria) !important;
  color: var(--cor-secundaria) !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  transition: var(--transition-padrao) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--cor-secundaria) !important;
  color: var(--cor-branco) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 15px rgba(243, 146, 0, 0.2) !important;
}

/* ===== COMPONENTES - CARDS ===== */
.card {
  border: none !important;
  border-radius: var(--borda-radius-lg) !important;
  overflow: hidden !important;
  transition: var(--transition-padrao) !important;
  box-shadow: var(--sombra-md) !important;
}

.card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--sombra-lg) !important;
}

.card-body {
  padding: 1.5rem !important;
}

.card-title {
  color: var(--cor-primaria) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

.card-text {
  color: var(--cor-cinza-escuro) !important;
  margin-bottom: 1.5rem !important;
}


/* ===== ANIMAÇÕES ===== */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6) !important;
  }
  70% {
    box-shadow: 0 0 0 20px rgba(37, 211, 102, 0) !important;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0) !important;
  }
}

.animate__pulse {
  animation: pulse 2s infinite !important;
}

.image-float-up {
  opacity: 0 !important;
  transform: translateY(100px) !important;
  filter: blur(10px) !important;
  transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.image-float-up-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

.svg-hover [filter*="shadow"] {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.svg-hover:hover [filter*="shadow"] {
  transform: translateY(-8px) !important;
}

.card-img-container svg {
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.fade-in-on-scroll {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.fade-in-on-scroll.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.ripple-effect {
  position: absolute !important;
  border-radius: 50% !important;
  transform: scale(0) !important;
  animation: ripple 0.8s linear !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
}

@keyframes ripple {
  to {
    transform: scale(2.5) !important;
    opacity: 0 !important;
  }
}

@keyframes fadeIn {
  from { opacity: 0 !important; transform: scale(0.9) !important; }
  to { opacity: 1 !important; transform: scale(1) !important; }
}

@keyframes zoomIn {
  from { opacity: 0 !important; transform: scale(0.7) !important; }
  to   { opacity: 1 !important; transform: scale(1) !important; }
}

@keyframes slideUp {
  from { opacity: 0 !important; transform: translateY(30px) !important; }
  to   { opacity: 1 !important; transform: translateY(0) !important; }
}

@keyframes slideLeft {
  from { opacity: 0 !important; transform: translateX(30px) !important; }
  to   { opacity: 1 !important; transform: translateX(0) !important; }
}

@keyframes slideInLeft {
  from { transform: translateX(-50px) !important; opacity: 0 !important; }
  to { transform: translateX(0) !important; opacity: 1 !important; }
}

@keyframes slideInRight {
  from { transform: translateX(50px) !important; opacity: 0 !important; }
  to { transform: translateX(0) !important; opacity: 1 !important; }
}

@keyframes buttonPop {
  0% { transform: scale(0.8) !important; opacity: 0 !important; }
  100% { transform: scale(1) !important; opacity: 1 !important; }
}

.animate-fade { animation: fadeIn 0.8s ease-out !important; }
.animate-zoom { animation: zoomIn 0.8s ease-out !important; }
.animate-up { animation: slideUp 0.8s ease-out !important; }
.animate-left { animation: slideLeft 0.8s ease-out !important; }

button, .btn { animation: buttonPop 0.5s ease-in-out !important; }

.slide-left {
  opacity: 0 !important;
  transform: translateX(-50px) !important;
  transition: all 0.6s ease-in-out !important;
}

.slide-left.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.slide-right {
  opacity: 0 !important;
  transform: translateX(50px) !important;
  transition: all 0.6s ease-in-out !important;
}

.slide-right.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.fade-in {
  opacity: 0 !important;
  transition: opacity 0.6s ease-in-out !important;
}

.fade-in.visible {
  opacity: 1 !important;
}

.zoom-in {
  opacity: 0 !important;
  transform: scale(0.8) !important;
  transition: all 0.6s ease-in-out !important;
}

.zoom-in.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.reveal {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: all 0.5s ease-in-out !important;
}

.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ===== SEÇÕES ESPECIAIS ===== */
.projects {
  background-color: #0E1117 !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.projects h2 {
  color: #F8A32B !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.projects .card {
  background: linear-gradient(145deg, #111827, #1F2937) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.projects .card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6) !important;
}

.projects video {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

.projects .card-body {
  color: #EAEAEA !important;
}

.projects .card-title {
  color: #F8A32B !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.projects .card-text {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #CCCCCC !important;
  opacity: 0.9 !important;
}

.projects .btn {
  background-color: #F8A32B !important;
  color: #0E1117 !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  border-radius: 50px !important;
  transition: background-color 0.3s ease !important;
}

.projects .btn:hover {
  background-color: #e6951f !important;
  color: #FFFFFF !important;
}

.cta-section {
  background: var(--gradiente-primario) !important;
  color: var(--cor-branco) !important;
  text-align: center !important;
  padding: 80px 0 !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.cta-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23F39200' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E") !important;
  opacity: 0.5 !important;
  z-index: -1 !important;
}

.cta-section h2 {
  color: var(--cor-branco) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

.cta-section p {
  font-size: 1.2rem !important;
  max-width: 700px !important;
  margin: 0 auto 30px !important;
  opacity: 0.9 !important;
}

.contact {
  background-color: #e8f5e9 !important;
  padding: 80px 0 !important;
}

.contact .form-control {
  border: none !important;
  border-radius: var(--borda-radius-md) !important;
  padding: 12px 20px !important;
  background-color: var(--cor-branco) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
  transition: var(--transition-padrao) !important;
}

.contact .form-control:focus {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

.contact textarea.form-control {
  min-height: 120px !important;
}

.contact .btn-success {
  background-color: var(--cor-whatsapp) !important;
  width: 100% !important;
  padding: 14px 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}




/* ===== WHATSAPP BADGE ===== */
.ruantech-wa-floating-badge {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  transition: none !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
}

.ruantech-wa-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 65px !important;
  height: 65px !important;
  background-color: var(--cor-whatsapp) !important;
  color: var(--cor-branco) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  text-decoration: none !important;
  animation: ruantech-wa-pulse 2s infinite !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ruantech-wa-label {
  display: block !important;
  margin-top: 8px !important;
  padding: 4px 12px !important;
  background-color: var(--cor-branco) !important;
  color: #333 !important;
  font-size: 12px !important;
  border-radius: 50px !important;
  text-align: center !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

@keyframes ruantech-wa-pulse {
  0% {
    transform: scale(1) !important;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7) !important;
  }
  
  70% {
    transform: scale(1.1) !important;
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0) !important;
  }
  
  100% {
    transform: scale(1) !important;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0) !important;
  }
}

/* ===== MODAL ===== */
.modal-content {
  border: none !important;
  border-radius: var(--borda-radius-lg) !important;
  overflow: hidden !important;
}

.modal-header {
  border-bottom: none !important;
  padding: 20px 25px !important;
}

.modal-body {
  padding: 20px 25px 30px !important;
}



.animate-modal {
  animation: fadeIn 0.3s ease-in-out !important;
}

/* ===== RESPONSIVIDADE ===== */
@media (max-width: 1199px) {
  h1, .h1 { font-size: 2.5rem !important; }
  h2, .h2 { font-size: 2.2rem !important; }
  h3, .h3 { font-size: 1.8rem !important; }
  
  .display-1 { font-size: 4rem !important; }
  .display-2 { font-size: 3.5rem !important; }
  .display-3 { font-size: 3rem !important; }
  .display-4 { font-size: 2.5rem !important; }
  .display-5 { font-size: 2.2rem !important; }
  .display-6 { font-size: 2rem !important; }

  .section-title {
    font-size: 2.2rem !important;
  }
  
  .tech-heading,
  .card-body h4 {
    font-size: 1.4rem !important;
  }
}

@media (max-width: 991.98px) {
  .service-card {
    margin-bottom: 30px !important;
  }
  
  .navbar-brand {
    font-size: 1.6rem !important;
  }
  
  .navbar-brand img {
    height: 35px !important;
  }
  
  .cta-section h2 {
    font-size: 2rem !important;
  }
  
 
}

@media (max-width: 767.98px) {
  body {
    font-size: 15px !important;
  }
  
  h1, .h1 { font-size: 2rem !important; }
  h2, .h2 { font-size: 1.8rem !important; }
  h3, .h3 { font-size: 1.6rem !important; }
  h4, .h4 { font-size: 1.4rem !important; }
  
  .display-1 { font-size: 3rem !important; }
  .display-2 { font-size: 2.8rem !important; }
  .display-3 { font-size: 2.6rem !important; }
  .display-4 { font-size: 2.4rem !important; }
  .display-5 { font-size: 2rem !important; }
  .display-6 { font-size: 1.8rem !important; }
  
  .lead {
    font-size: 1.1rem !important;
  }
  
  .ruan-services-section,
  .services-section {
    padding: 60px 0 !important;
  }
  
  .section-title {
    font-size: 1.8rem !important;
  }
  
  .card-img-top {
    height: 200px !important;
  }
  
  .btn-primary,
  .service-card .btn-primary {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
  }
  
  .titulo {
    font-size: 1.8rem !important;
  }
  
  .descricao {
    font-size: 1rem !important;
  }
  
  .hero-badges .badge {
    display: inline-block !important;
    margin-bottom: 5px !important;
  }
  
  .hero-title {
    font-size: 2.2rem !important;
  }
  
  .hero-text {
    font-size: 1.1rem !important;
  }
  
  .service-icon,
  .industry-icon {
    margin: 0 auto 20px !important;
  }
  
  .text-center-md {
    text-align: center !important;
  }
  
  .pricing-popular {
    transform: scale(1) !important;
  }
  
  .pricing-popular:hover {
    transform: translateY(-15px) !important;
  }
  
  .navbar-brand {
    font-size: 1.5rem !important;
  }
  
  .navbar-brand img {
    height: 32px !important;
  }
}

@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.8rem !important; }
  h2, .h2 { font-size: 1.6rem !important; }
  h3, .h3 { font-size: 1.4rem !important; }
  h4, .h4 { font-size: 1.2rem !important; }
  
  .display-1 { font-size: 2.6rem !important; }
  .display-2 { font-size: 2.4rem !important; }
  .display-3 { font-size: 2.2rem !important; }
  .display-4 { font-size: 2rem !important; }
  .display-5 { font-size: 1.8rem !important; }
  .display-6 { font-size: 1.6rem !important; }
  
  .card-body {
    padding: 1.25rem !important;
  }
  
  .image-box {
    width: 90vw !important;
  }

  .image-box img {
    width: 90vw !important;
  }

  .ruan-service-card {
    padding-top: 140px !important;
  }
  
  .tech-heading,
  .card-body h4 {
    font-size: 1.3rem !important;
  }
  
  .tech-description,
  .card-text {
    font-size: 1rem !important;
  }
  
  .titulo {
    font-size: 1.6rem !important;
    gap: 10px !important;
  }
  
  .icone-slide {
    width: 40px !important;
    height: 40px !important;
  }
  
  .descricao {
    font-size: 0.95rem !important;
  }
  
  .btn {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }
  
  .section-title::after {
    width: 60px !important;
    height: 3px !important;
  }
  

  .ruantech-wa-btn {
    width: 55px !important;
    height: 55px !important;
  }
  
  .ruantech-wa-label {
    font-size: 10px !important;
  }
  
  .navbar-brand {
    font-size: 1.4rem !important;
  }
  
  .navbar-brand img {
    height: 30px !important;
  }
  
  .numeric-indicators-wrapper {
    max-width: 70% !important;
  }
  
  .numeric-indicators button {
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
  }
}

/* ===== EFEITOS ESPECIAIS E DECORAÇÕES ===== */
.bg-pattern-1 {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2314294F' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.bg-pattern-2 {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23F39200' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.bg-glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.shape-divider {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  line-height: 0 !important;
  z-index: 1 !important;
}

.shape-divider svg {
  position: relative !important;
  display: block !important;
  width: calc(100% + 1.3px) !important;
  height: 80px !important;
}

.shape-divider-top {
  top: 0 !important;
  bottom: auto !important;
  transform: rotate(180deg) !important;
}

.shape-fill-white {
  fill: var(--cor-branco) !important;
}

.shape-fill-light {
  fill: var(--cor-cinza-claro) !important;
}

.shape-fill-primary {
  fill: var(--cor-primaria) !important;
}

.text-gradient {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
  display: inline-block !important;
}

.btn-fancy {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transition: all 0.5s ease !important;
  border-radius: 30px !important;
  padding: 12px 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

.btn-fancy::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: all 0.5s ease !important;
  z-index: -1 !important;
}

.btn-fancy:hover::before {
  left: 100% !important;
}

.btn-fancy:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ===== INTEGRAÇÕES DE VÍDEO E MÍDIA ===== */
.video-ajustado {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  transition: transform 0.3s ease-in-out !important;
}

.video-container:hover .video-ajustado {
  transform: scale(1.02) !important;
}

/* ===== ESTILOS ESPECIALIZADOS - PROCESSO DE TRABALHO ===== */
.process-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 80px 0 !important;
}

.process-item {
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 30px !important;
}

.process-item:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  top: 40px !important;
  right: -50% !important;
  width: 100% !important;
  height: 2px !important;
  background: rgba(20, 41, 79, 0.1) !important;
  z-index: -1 !important;
}

.process-icon {
  width: 80px !important;
  height: 80px !important;
  background: rgba(20, 41, 79, 0.1) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  color: var(--cor-secundaria) !important;
  font-size: 2rem !important;
  position: relative !important;
  z-index: 2 !important;
  transition: var(--transition-padrao) !important;
}

.process-item:hover .process-icon {
  background: var(--cor-primaria) !important;
  color: var(--cor-branco) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(20, 41, 79, 0.2) !important;
}

.process-number {
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  width: 30px !important;
  height: 30px !important;
  background: var(--cor-secundaria) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--cor-branco) !important;
}

.process-item h3 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
  color: var(--cor-primaria) !important;
  transition: var(--transition-padrao) !important;
}

.process-item:hover h3 {
  color: var(--cor-secundaria) !important;
}

.process-item p {
  color: var(--cor-cinza-medio) !important;
  font-size: 0.95rem !important;
  max-width: 280px !important;
  margin: 0 auto !important;
}

/* ===== ESTILOS ESPECIALIZADOS - SEÇÃO DE CONTATO ===== */
.contact-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 80px 0 !important;
  background-color: var(--cor-branco) !important;
}

.contact-info-item {
  display: flex !important;
  margin-bottom: 30px !important;
  background-color: var(--cor-branco) !important;
  padding: 20px !important;
  border-radius: var(--borda-radius-md) !important;
  box-shadow: var(--sombra-sm) !important;
  transition: var(--transition-padrao) !important;
}

.contact-info-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--sombra-md) !important;
}

.contact-icon {
  width: 60px !important;
  height: 60px !important;
  background: var(--cor-cinza-claro) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 20px !important;
  color: var(--cor-secundaria) !important;
  font-size: 1.5rem !important;
  flex-shrink: 0 !important;
  transition: var(--transition-padrao) !important;
}

.contact-info-item:hover .contact-icon {
  background: var(--cor-primaria) !important;
  color: var(--cor-branco) !important;
}

.contact-details h5 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--cor-primaria) !important;
  margin-bottom: 10px !important;
  transition: var(--transition-padrao) !important;
}

.contact-info-item:hover .contact-details h5 {
  color: var(--cor-secundaria) !important;
}

.contact-form {
  background: var(--cor-branco) !important;
  border-radius: var(--borda-radius-lg) !important;
  padding: 40px !important;
  box-shadow: var(--sombra-md) !important;
}

.contact-form .form-control {
  height: 55px !important;
  border: 1px solid #eee !important;
  border-radius: var(--borda-radius-sm) !important;
  padding: 0 20px !important;
  margin-bottom: 20px !important;
  transition: var(--transition-padrao) !important;
}

.contact-form .form-control:focus {
  border-color: var(--cor-secundaria) !important;
  box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.1) !important;
  transform: translateY(-3px) !important;
}

.contact-form textarea.form-control {
  height: 180px !important;
  padding: 20px !important;
}

.contact-form .btn-primary {
  width: 100% !important;
  padding: 15px 0 !important;
}

/* ===== ESTILOS ESPECIALIZADOS - RUANTECH ESPECÍFICOS ===== */
.ruantech-section {
  padding: 80px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.ruantech-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

.ruantech-header {
  text-align: center !important;
  margin-bottom: 60px !important;
}

.ruantech-badge {
  display: inline-block !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  border-radius: 30px !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 15px !important;
}

.ruantech-title {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
  color: var(--cor-primaria) !important;
}

.ruantech-subtitle {
  font-size: 1.1rem !important;
  color: var(--cor-cinza-medio) !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.ruantech-services-grid {
  margin-bottom: 60px !important;
}

.ruantech-service-group-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 20px !important;
}

.ruantech-icon-wrapper {
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin-right: 15px !important;
  flex-shrink: 0 !important;
}

.ruantech-group-title {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  color: var(--cor-primaria) !important;
  margin: 0 !important;
}

.ruantech-service-card {
  padding: 25px !important;
  border-radius: var(--borda-radius-lg) !important;
  background: var(--cor-branco) !important;
  box-shadow: var(--sombra-sm) !important;
  transition: var(--transition-padrao) !important;
  height: 100% !important;
  position: relative !important;
  border: none !important;
  z-index: 1 !important;
}

.ruantech-service-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: var(--sombra-lg) !important;
}

.ruantech-service-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: var(--cor-secundaria) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  z-index: -1 !important;
}

.ruantech-service-card:hover::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

.ruantech-service-icon {
  color: var(--cor-secundaria) !important;
  font-size: 2rem !important;
  margin-bottom: 20px !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-service-card:hover .ruantech-service-icon {
  transform: scale(1.1) !important;
}

.ruantech-service-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--cor-primaria) !important;
  margin-bottom: 15px !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-service-card:hover .ruantech-service-title {
  color: var(--cor-secundaria) !important;
}

.ruantech-service-desc {
  color: var(--cor-cinza-medio) !important;
  margin-bottom: 20px !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.ruantech-features-list {
  padding-left: 0 !important;
  list-style: none !important;
  margin-bottom: 20px !important;
}

.ruantech-feature {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.ruantech-check {
  color: var(--cor-secundaria) !important;
  margin-right: 10px !important;
}

.ruantech-feature-text {
  font-size: 0.9rem !important;
  color: var(--cor-cinza-escuro) !important;
}

.ruantech-btn {
  color: var(--cor-secundaria) !important;
  font-weight: 600 !important;
  transition: var(--transition-padrao) !important;
  display: inline-block !important;
}

.ruantech-btn:hover {
  color: var(--cor-primaria) !important;
  text-decoration: none !important;
}

.ruantech-segment-services {
  background: var(--cor-branco) !important;
  border-radius: var(--borda-radius-lg) !important;
  padding: 25px !important;
  box-shadow: var(--sombra-sm) !important;
  margin-bottom: 60px !important;
}

.ruantech-segment-header {
  text-align: center !important;
  margin-bottom: 20px !important;
}

.ruantech-segment-item {
  height: 100% !important;
  padding: 15px !important;
  transition: var(--transition-padrao) !important;
  border-radius: var(--borda-radius-md) !important;
}

.ruantech-segment-item:hover {
  transform: translateY(-5px) !important;
  background-color: var(--cor-cinza-claro) !important;
}

.ruantech-segment-icon {
  width: 60px !important;
  height: 60px !important;
  background-color: rgba(20, 41, 79, 0.1) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 15px !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-segment-item:hover .ruantech-segment-icon {
  background-color: rgba(243, 146, 0, 0.2) !important;
}

.ruantech-segment-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--cor-primaria) !important;
  margin-bottom: 10px !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-segment-item:hover .ruantech-segment-title {
  color: var(--cor-secundaria) !important;
}

.ruantech-segment-desc {
  font-size: 0.85rem !important;
  color: var(--cor-cinza-medio) !important;
  margin-bottom: 0 !important;
}

.ruantech-highlight {
  margin-bottom: 60px !important;
}

.ruantech-highlight-content {
  background: var(--cor-branco) !important;
  padding: 40px !important;
  border-radius: var(--borda-radius-lg) !important;
  box-shadow: var(--sombra-md) !important;
}

.ruantech-highlight-title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--cor-primaria) !important;
  margin-bottom: 25px !important;
}

.ruantech-highlight-feature {
  display: flex !important;
  margin-bottom: 20px !important;
}

.ruantech-feature-icon {
  color: var(--cor-secundaria) !important;
  margin-right: 15px !important;
  flex-shrink: 0 !important;
}

.ruantech-feature-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--cor-primaria) !important;
  margin-bottom: 5px !important;
}

.ruantech-feature-desc {
  color: var(--cor-cinza-medio) !important;
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
}

.ruantech-highlight-image img {
  border-radius: var(--borda-radius-lg) !important;
  box-shadow: var(--sombra-lg) !important;
}

.ruantech-cta {
  text-align: center !important;
}

.ruantech-cta-card {
  background: var(--gradiente-primario) !important;
  color: var(--cor-branco) !important;
  padding: 50px !important;
  border-radius: var(--borda-radius-xl) !important;
  box-shadow: var(--sombra-lg) !important;
}

.ruantech-cta-title {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  color: var(--cor-branco) !important;
}

.ruantech-cta-text {
  font-size: 1.1rem !important;
  max-width: 700px !important;
  margin: 0 auto 30px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.ruantech-cta-btn {
  padding: 15px 40px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: var(--borda-radius-pill) !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-cta-btn:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 991.98px) {
  .ruantech-title {
    font-size: 2rem !important;
  }
  
  .ruantech-highlight-title {
    font-size: 1.8rem !important;
  }
  
  .ruantech-cta-title {
    font-size: 1.8rem !important;
  }
  
  .ruantech-group-title {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 767.98px) {
  .ruantech-section {
    padding: 60px 0 !important;
  }
  
  .ruantech-header {
    margin-bottom: 40px !important;
  }
  
  .ruantech-title {
    font-size: 1.8rem !important;
  }
  
  .ruantech-services-grid,
  .ruantech-segment-services,
  .ruantech-highlight {
    margin-bottom: 40px !important;
  }
  
  .ruantech-highlight-content {
    padding: 30px !important;
  }
  
  .ruantech-highlight-title {
    font-size: 1.6rem !important;
  }
  
  .ruantech-cta-card {
    padding: 30px !important;
  }
  
  .ruantech-cta-title {
    font-size: 1.6rem !important;
  }
  
  .ruantech-cta-text {
    font-size: 1rem !important;
  }
  
  .ruantech-cta-btn {
    padding: 12px 30px !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 575.98px) {
  .ruantech-badge {
    font-size: 0.8rem !important;
  }
  
  .ruantech-service-icon {
    font-size: 1.8rem !important;
  }
  
  .ruantech-service-title {
    font-size: 1.2rem !important;
  }
  
  .ruantech-feature-title {
    font-size: 1.1rem !important;
  }
  
  .ruantech-segment-icon {
    width: 50px !important;
    height: 50px !important;
  }
  
  .ruantech-cta-card {
    padding: 25px !important;
    border-radius: 15px !important;
  }
}

/* ===== PERSONALIZAÇÕES ADICIONAIS PARA RUANTECH ===== */
.ruantech-border-gradient {
  border: 3px solid transparent !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  background-image: linear-gradient(var(--cor-branco), var(--cor-branco)), 
                  linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria)) !important;
  border-radius: var(--borda-radius-lg) !important;
}

.ruantech-tech-icon {
  font-size: 3.5rem !important;
  margin-bottom: 15px !important;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
  display: inline-block !important;
}

.ruantech-counter {
  font-size: 3rem !important;
  font-weight: 800 !important;
  color: var(--cor-primaria) !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
}

.ruantech-counter-text {
  font-size: 1.1rem !important;
  color: var(--cor-secundaria) !important;
  font-weight: 600 !important;
}

.ruantech-timeline {
  position: relative !important;
  padding-left: 30px !important;
}

.ruantech-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 2px !important;
  background: linear-gradient(to bottom, var(--cor-primaria), var(--cor-secundaria)) !important;
}

.ruantech-timeline-item {
  position: relative !important;
  padding-bottom: 30px !important;
}

.ruantech-timeline-item:last-child {
  padding-bottom: 0 !important;
}

.ruantech-timeline-dot {
  position: absolute !important;
  left: -39px !important;
  top: 0 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--cor-secundaria) !important;
  border: 3px solid var(--cor-branco) !important;
  box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.3) !important;
}

.ruantech-timeline-content {
  background: var(--cor-branco) !important;
  border-radius: var(--borda-radius-md) !important;
  padding: 20px !important;
  box-shadow: var(--sombra-sm) !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-timeline-item:hover .ruantech-timeline-content {
  transform: translateX(5px) !important;
  box-shadow: var(--sombra-md) !important;
}

.ruantech-timeline-date {
  font-size: 0.9rem !important;
  color: var(--cor-secundaria) !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.ruantech-timeline-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--cor-primaria) !important;
  margin-bottom: 10px !important;
}

.ruantech-tooltip {
  position: relative !important;
  cursor: help !important;
}

.ruantech-tooltip::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: 125% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: 200px !important;
  background: var(--cor-primaria) !important;
  color: var(--cor-branco) !important;
  padding: 8px 12px !important;
  border-radius: var(--borda-radius-sm) !important;
  font-size: 0.8rem !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: all 0.3s ease !important;
  z-index: 100 !important;
}

.ruantech-tooltip::before {
  content: '' !important;
  position: absolute !important;
  bottom: 115% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 8px solid transparent !important;
  border-top-color: var(--cor-primaria) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: all 0.3s ease !important;
  z-index: 100 !important;
}

.ruantech-tooltip:hover::after,
.ruantech-tooltip:hover::before {
  visibility: visible !important;
  opacity: 1 !important;
}

.ruantech-custom-select {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.ruantech-custom-select select {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  font-size: 1rem !important;
  padding: 12px 20px !important;
  background: var(--cor-branco) !important;
  border: 1px solid #eee !important;
  border-radius: var(--borda-radius-md) !important;
  cursor: pointer !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-custom-select::after {
  content: '\25BC' !important;
  position: absolute !important;
  top: 50% !important;
  right: 15px !important;
  transform: translateY(-50%) !important;
  color: var(--cor-secundaria) !important;
  pointer-events: none !important;
  font-size: 0.8rem !important;
}

.ruantech-custom-select select:focus {
  outline: none !important;
  border-color: var(--cor-secundaria) !important;
  box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.1) !important;
}

.ruantech-custom-checkbox {
  position: relative !important;
  padding-left: 30px !important;
  cursor: pointer !important;
  display: inline-block !important;
  margin-bottom: 15px !important;
}

.ruantech-custom-checkbox input {
  position: absolute !important;
  opacity: 0 !important;
  cursor: pointer !important;
  height: 0 !important;
  width: 0 !important;
}

.ruantech-checkmark {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 20px !important;
  width: 20px !important;
  background-color: var(--cor-branco) !important;
  border: 2px solid #eee !important;
  border-radius: 4px !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-custom-checkbox:hover input ~ .ruantech-checkmark {
  border-color: var(--cor-secundaria) !important;
}

.ruantech-custom-checkbox input:checked ~ .ruantech-checkmark {
  background-color: var(--cor-secundaria) !important;
  border-color: var(--cor-secundaria) !important;
}

.ruantech-checkmark:after {
  content: '' !important;
  position: absolute !important;
  display: none !important;
  left: 6px !important;
  top: 2px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid var(--cor-branco) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.ruantech-custom-checkbox input:checked ~ .ruantech-checkmark:after {
  display: block !important;
}

.ruantech-ribbon {
  position: absolute !important;
  top: 20px !important;
  right: -30px !important;
  transform: rotate(45deg) !important;
  background: var(--cor-secundaria) !important;
  color: var(--cor-branco) !important;
  padding: 5px 40px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  z-index: 10 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.ruantech-blob {
  position: absolute !important;
  z-index: -1 !important;
  opacity: 0.1 !important;
  filter: blur(50px) !important;
  animation: blob-animation 15s infinite alternate !important;
}

@keyframes blob-animation {
  0% {
    transform: translate(0, 0) scale(1) !important;
  }
  33% {
    transform: translate(30px, -50px) scale(1.1) !important;
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9) !important;
  }
  100% {
    transform: translate(0, 0) scale(1) !important;
  }
}

.ruantech-blob-primary {
  width: 300px !important;
  height: 300px !important;
  background: var(--cor-primaria) !important;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% !important;
}

.ruantech-blob-secondary {
  width: 250px !important;
  height: 250px !important;
  background: var(--cor-secundaria) !important;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% !important;
  animation-delay: 5s !important;
}

.ruantech-scrollspy {
  position: sticky !important;
  top: 100px !important;
}

.ruantech-scrollspy-item {
  display: block !important;
  padding: 10px 15px !important;
  margin-bottom: 5px !important;
  border-left: 3px solid transparent !important;
  color: var(--cor-cinza-medio) !important;
  transition: var(--transition-padrao) !important;
}

.ruantech-scrollspy-item:hover,
.ruantech-scrollspy-item.active {
  border-left-color: var(--cor-secundaria) !important;
  color: var(--cor-primaria) !important;
  background-color: rgba(243, 146, 0, 0.05) !important;
}

/* ===== CLASSES DE UTILIDADE ADICIONAIS PARA RUANTECH ===== */
.ruantech-text-xs { font-size: 0.75rem !important; }
.ruantech-text-sm { font-size: 0.875rem !important; }
.ruantech-text-md { font-size: 1rem !important; }
.ruantech-text-lg { font-size: 1.125rem !important; }
.ruantech-text-xl { font-size: 1.25rem !important; }
.ruantech-text-2xl { font-size: 1.5rem !important; }
.ruantech-text-3xl { font-size: 1.875rem !important; }
.ruantech-text-4xl { font-size: 2.25rem !important; }
.ruantech-text-5xl { font-size: 3rem !important; }

.ruantech-font-light { font-weight: 300 !important; }
.ruantech-font-normal { font-weight: 400 !important; }
.ruantech-font-medium { font-weight: 500 !important; }
.ruantech-font-semibold { font-weight: 600 !important; }
.ruantech-font-bold { font-weight: 700 !important; }
.ruantech-font-extrabold { font-weight: 800 !important; }

.ruantech-tracking-tight { letter-spacing: -0.025em !important; }
.ruantech-tracking-normal { letter-spacing: 0 !important; }
.ruantech-tracking-wide { letter-spacing: 0.025em !important; }
.ruantech-tracking-wider { letter-spacing: 0.05em !important; }
.ruantech-tracking-widest { letter-spacing: 0.1em !important; }

.ruantech-leading-none { line-height: 1 !important; }
.ruantech-leading-tight { line-height: 1.25 !important; }
.ruantech-leading-snug { line-height: 1.375 !important; }
.ruantech-leading-normal { line-height: 1.5 !important; }
.ruantech-leading-relaxed { line-height: 1.625 !important; }
.ruantech-leading-loose { line-height: 2 !important; }

.ruantech-rotate-1 { transform: rotate(1deg) !important; }
.ruantech-rotate-2 { transform: rotate(2deg) !important; }
.ruantech-rotate-3 { transform: rotate(3deg) !important; }
.ruantech-rotate-6 { transform: rotate(6deg) !important; }
.ruantech-rotate-12 { transform: rotate(12deg) !important; }
.ruantech-rotate-45 { transform: rotate(45deg) !important; }
.ruantech-rotate-90 { transform: rotate(90deg) !important; }
.ruantech-rotate-180 { transform: rotate(180deg) !important; }
.ruantech-rotate-n1 { transform: rotate(-1deg) !important; }
.ruantech-rotate-n2 { transform: rotate(-2deg) !important; }
.ruantech-rotate-n3 { transform: rotate(-3deg) !important; }
.ruantech-rotate-n6 { transform: rotate(-6deg) !important; }
.ruantech-rotate-n12 { transform: rotate(-12deg) !important; }
.ruantech-rotate-n45 { transform: rotate(-45deg) !important; }
.ruantech-rotate-n90 { transform: rotate(-90deg) !important; }
.ruantech-rotate-n180 { transform: rotate(-180deg) !important; }

.ruantech-scale-0 { transform: scale(0) !important; }
.ruantech-scale-50 { transform: scale(0.5) !important; }
.ruantech-scale-75 { transform: scale(0.75) !important; }
.ruantech-scale-90 { transform: scale(0.9) !important; }
.ruantech-scale-95 { transform: scale(0.95) !important; }
.ruantech-scale-100 { transform: scale(1) !important; }
.ruantech-scale-105 { transform: scale(1.05) !important; }
.ruantech-scale-110 { transform: scale(1.1) !important; }
.ruantech-scale-125 { transform: scale(1.25) !important; }
.ruantech-scale-150 { transform: scale(1.5) !important; }

.ruantech-translate-x-0 { transform: translateX(0) !important; }
.ruantech-translate-x-1 { transform: translateX(0.25rem) !important; }
.ruantech-translate-x-2 { transform: translateX(0.5rem) !important; }
.ruantech-translate-x-3 { transform: translateX(0.75rem) !important; }
.ruantech-translate-x-4 { transform: translateX(1rem) !important; }
.ruantech-translate-x-5 { transform: translateX(1.25rem) !important; }
.ruantech-translate-x-6 { transform: translateX(1.5rem) !important; }
.ruantech-translate-x-8 { transform: translateX(2rem) !important; }
.ruantech-translate-x-10 { transform: translateX(2.5rem) !important; }
.ruantech-translate-x-12 { transform: translateX(3rem) !important; }
.ruantech-translate-x-16 { transform: translateX(4rem) !important; }
.ruantech-translate-x-20 { transform: translateX(5rem) !important; }
.ruantech-translate-x-24 { transform: translateX(6rem) !important; }
.ruantech-translate-x-32 { transform: translateX(8rem) !important; }

.ruantech-translate-y-0 { transform: translateY(0) !important; }
.ruantech-translate-y-1 { transform: translateY(0.25rem) !important; }
.ruantech-translate-y-2 { transform: translateY(0.5rem) !important; }
.ruantech-translate-y-3 { transform: translateY(0.75rem) !important; }
.ruantech-translate-y-4 { transform: translateY(1rem) !important; }
.ruantech-translate-y-5 { transform: translateY(1.25rem) !important; }
.ruantech-translate-y-6 { transform: translateY(1.5rem) !important; }
.ruantech-translate-y-8 { transform: translateY(2rem) !important; }
.ruantech-translate-y-10 { transform: translateY(2.5rem) !important; }
.ruantech-translate-y-12 { transform: translateY(3rem) !important; }
.ruantech-translate-y-16 { transform: translateY(4rem) !important; }
.ruantech-translate-y-20 { transform: translateY(5rem) !important; }
.ruantech-translate-y-24 { transform: translateY(6rem) !important; }
.ruantech-translate-y-32 { transform: translateY(8rem) !important; }

.ruantech-translate-x-n1 { transform: translateX(-0.25rem) !important; }
.ruantech-translate-x-n2 { transform: translateX(-0.5rem) !important; }
.ruantech-translate-x-n3 { transform: translateX(-0.75rem) !important; }
.ruantech-translate-x-n4 { transform: translateX(-1rem) !important; }
.ruantech-translate-x-n5 { transform: translateX(-1.25rem) !important; }
.ruantech-translate-x-n6 { transform: translateX(-1.5rem) !important; }
.ruantech-translate-x-n8 { transform: translateX(-2rem) !important; }
.ruantech-translate-x-n10 { transform: translateX(-2.5rem) !important; }
.ruantech-translate-x-n12 { transform: translateX(-3rem) !important; }
.ruantech-translate-x-n16 { transform: translateX(-4rem) !important; }
.ruantech-translate-x-n20 { transform: translateX(-5rem) !important; }
.ruantech-translate-x-n24 { transform: translateX(-6rem) !important; }
.ruantech-translate-x-n32 { transform: translateX(-8rem) !important; }

.ruantech-translate-y-n1 { transform: translateY(-0.25rem) !important; }
.ruantech-translate-y-n2 { transform: translateY(-0.5rem) !important; }
.ruantech-translate-y-n3 { transform: translateY(-0.75rem) !important; }
.ruantech-translate-y-n4 { transform: translateY(-1rem) !important; }
.ruantech-translate-y-n5 { transform: translateY(-1.25rem) !important; }
.ruantech-translate-y-n6 { transform: translateY(-1.5rem) !important; }
.ruantech-translate-y-n8 { transform: translateY(-2rem) !important; }
.ruantech-translate-y-n10 { transform: translateY(-2.5rem) !important; }
.ruantech-translate-y-n12 { transform: translateY(-3rem) !important; }
.ruantech-translate-y-n16 { transform: translateY(-4rem) !important; }
.ruantech-translate-y-n20 { transform: translateY(-5rem) !important; }
.ruantech-translate-y-n24 { transform: translateY(-6rem) !important; }
.ruantech-translate-y-n32 { transform: translateY(-8rem) !important; }

/* ===== ESTILOS DE IMPRESSÃO ===== */
@media print {
  body {
    background: var(--cor-branco) !important;
    color: var(--cor-preto) !important;
    font-size: 12pt !important;
  }
  
  a {
    color: var(--cor-primaria) !important;
    text-decoration: underline !important;
  }
  
  a[href]::after {
    content: " (" attr(href) ")" !important;
    font-size: 90% !important;
  }
  
  abbr[title]::after {
    content: " (" attr(title) ")" !important;
  }
  
  
  
  .container {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid !important;
    orphans: 3 !important;
    widows: 3 !important;
  }
  
  p, h2, h3 {
    orphans: 3 !important;
    widows: 3 !important;
  }
  
  table {
    border-collapse: collapse !important;
  }
  
  table td, table th {
    background-color: var(--cor-branco) !important;
  }
  
  .card, .ruantech-service-card,
  .feature-card, .industry-card,
  .pricing-card, .testimonial-card {
    border: 1px solid #ddd !important;
    page-break-inside: avoid !important;
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid !important;
  }
  
  @page {
    margin: 2cm !important;
  }
}