/* ============================================
   BASE GLOBAL (styles.css)
   ============================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Scrollbar customizado */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #f97316, #eab308);
  border-radius: 4px;
}

/* Seleção customizada */
::selection { background: rgba(249,115,22,0.3); }

/* Acessibilidade e responsividade */
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden; }

/* ============================================
   SEÇÃO SISTEMAS (XFunnel custom)
   ============================================ */
.sistemas-section {
  background: linear-gradient(180deg, #111827 0%, #000 100%);
  position: relative;
  padding: 4rem 0;
}

.sistemas-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 2rem;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-align: center;
  position: relative;
}
.section-title::after {
  content:'';
  position:absolute;
  bottom:-10px;left:50%;
  transform:translateX(-50%);
  width:80px;height:3px;
  background:linear-gradient(90deg,#f97316,#eab308);
  border-radius:2px;
}

.title-highlight {
  background: linear-gradient(135deg, #fb923c, #facc15);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sistemas-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  margin-top:3rem;
}

.sistema-card {
  background: linear-gradient(135deg,#1f2937 0%,#111827 100%);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}
.sistema-card::before {
  content:'';
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(249,115,22,0.05),rgba(234,179,8,0.05));
  opacity:0;transition:opacity 0.4s ease;
}
.sistema-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(249,115,22,0.5);
  box-shadow:0 20px 40px rgba(249,115,22,0.15);
}
.sistema-card:hover::before { opacity:1; }

.sistema-logo {
  width:100%;height:120px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.95);
  border-radius:.75rem;margin-bottom:1.5rem;
  transition: all .4s ease;
}
.sistema-card:hover .sistema-logo { background:#fff;transform:scale(1.05); }

.sistema-logo img { max-width:80%;max-height:80%;object-fit:contain; }

.sistema-info { text-align:center; }
.sistema-name {
  font-size:1.25rem;font-weight:600;color:#fff;
  margin-bottom:.75rem;
}
.sistema-card:hover .sistema-name { color:#fb923c; }
.sistema-description { color:#d1d5db;line-height:1.6;font-size:.9rem;margin-bottom:1.5rem; }

.sistema-status {
  display:inline-flex;align-items:center;
  padding:.25rem .75rem;
  background:rgba(34,197,94,0.2);
  border:1px solid rgba(34,197,94,0.3);
  border-radius:1rem;
  font-size:.75rem;font-weight:500;color:#22c55e;
}
.sistema-status::before {
  content:'●';margin-right:.5rem;
  animation:pulse 2s infinite;
}

.progress-bar {
  height:2px;border-radius:1px;width:0;
  background:linear-gradient(90deg,#fb923c,#facc15);
  margin-top:1rem;
}
.sistema-card:hover .progress-bar { width:100%; }

/* ============================================
   ANIMAÇÕES (integrando os dois estilos)
   ============================================ */
@keyframes fadeIn {
  from {opacity:0;transform:translateY(30px);}
  to {opacity:1;transform:translateY(0);}
}
@keyframes pulse {
  0%,100%{opacity:1;}50%{opacity:.5;}
}

/* Escalonamento de animações */
.sistema-card:nth-child(1){animation-delay:.1s;}
.sistema-card:nth-child(2){animation-delay:.2s;}
.sistema-card:nth-child(3){animation-delay:.3s;}
.sistema-card:nth-child(4){animation-delay:.4s;}

/* ============================================
   RESPONSIVIDADE
   ============================================ */
@media(max-width:768px){
  .sistemas-section{padding:3rem 0;}
  .sistemas-grid{grid-template-columns:1fr;gap:1.5rem;}
  .sistema-card{padding:1.5rem;}
  .section-title{font-size:2rem;}
}
@media(max-width:480px){
  .sistemas-container{padding:0 1.5rem;}
  .sistema-card{padding:1.25rem;}
}