/* ========================================
   CARROSSEL E ELEMENTOS DE SERVIÇOS
   ======================================== */

/* ===== CARROSSEL DE PORTALES E SERVIÇOS ===== */

#carousel-portals {
  background-color: #f6f6f6;
  padding: 2rem 0;
  margin: 2rem 0;
}

#carousel-portals .container {
  background-color: #f6f6f6 !important;
  padding: 1rem !important;
  border-radius: 8px !important;
}

#carousel-portals .carousel-container {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1rem 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 200px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

#carousel-portals .carousel-wrapper {
  display: flex !important;
  gap: 1rem !important;
  min-width: max-content !important;
  padding: 0.5rem !important;
  width: max-content !important;
  height: auto !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
}

#carousel-portals .carousel-item {
  flex: 0 0 450px !important;
  flex-shrink: 0 !important;
  min-width: 450px !important;
  max-width: 450px !important;
  height: 140px !important;
  display: block !important;
  margin-right: 0 !important;
  position: relative !important;
  transition: transform 0.3s ease !important;
}

/* ===== CONFIGURAÇÕES ESPECÍFICAS POR NÚMERO DE ITENS ===== */

/* Configuração para mostrar 4.5 itens com loop infinito */
#carousel-portals.show-4-5 .carousel-container {
  overflow-x: hidden !important;
  position: relative !important;
}

/* Container para menos de 5 itens - utilizar 100% do espaço */
#carousel-portals:not(.show-4-5) .carousel-container {
  overflow-x: visible !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Classes para controle dinâmico via JavaScript */
#carousel-portals .carousel-container.overflow-hidden {
  overflow-x: hidden !important;
}

#carousel-portals .carousel-container.overflow-auto {
  overflow-x: auto !important;
}

#carousel-portals .carousel-wrapper.no-transform {
  transform: none !important;
}

#carousel-portals.show-4-5 .carousel-wrapper {
  display: flex !important;
  gap: 1rem !important;
  transition: transform 0.3s ease !important;
  will-change: transform !important;
  justify-content: center !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* Wrapper para menos de 5 itens - utilizar 100% do espaço */
#carousel-portals:not(.show-4-5) .carousel-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  justify-items: center !important;
  align-items: stretch !important;
  transition: none !important;
  will-change: auto !important;
  margin-left: 0 !important;
}

#carousel-portals.show-4-5 .carousel-item {
  min-width: calc(20% - 0.8rem) !important;
  max-width: calc(20% - 0.8rem) !important;
  flex: 0 0 calc(20% - 0.8rem) !important;
}

/* Layout para menos de 5 itens - utilizar 100% do espaço */
#carousel-portals:not(.show-4-5) .carousel-item {
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 0 !important;
  width: 100% !important;
}

/* Estratégia UX para até 4 itens - Layout Estático Responsivo */
#carousel-portals:not(.show-4-5) .carousel-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  justify-items: center !important;
  align-items: stretch !important;
}

#carousel-portals:not(.show-4-5) .carousel-item {
  width: 100% !important;
  max-width: 400px !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ===== ITENS PARCIAIS E VISÍVEIS ===== */

/* Primeiro item - 20% visível à esquerda */
#carousel-portals.show-4-5 .carousel-item:first-child,
#carousel-portals.show-4-5 .carousel-item-static:first-child {
  min-width: calc(20% - 0.8rem) !important;
  max-width: calc(20% - 0.8rem) !important;
  flex: 0 0 calc(20% - 0.8rem) !important;
  opacity: 0.8 !important;
  transform: scale(0.95) !important;
}

/* Quinto item - 10% visível à direita */
#carousel-portals.show-4-5 .carousel-item:nth-child(5),
#carousel-portals.show-4-5 .carousel-item-static:nth-child(5) {
  min-width: calc(10% - 0.8rem) !important;
  max-width: calc(10% - 0.8rem) !important;
  flex: 0 0 calc(10% - 0.8rem) !important;
  opacity: 0.8 !important;
  transform: scale(0.95) !important;
}

/* ===== ELEMENTOS ESPECIAIS ===== */

/* Estilos para itens estáticos */
#carousel-portals.show-4-5 .carousel-item-static {
  position: relative !important;
  transition: none !important;
  transform: none !important;
}

#carousel-portals.show-4-5 .carousel-content-container {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

#carousel-portals.show-4-5 .carousel-content {
  width: 100% !important;
  height: 100% !important;
  transition: opacity 0.3s ease !important;
}

/* Estilos para itens clonados (mantido para compatibilidade) */
#carousel-portals.show-4-5 .carousel-item-clone {
  pointer-events: none !important;
}

#carousel-portals.show-4-5 .carousel-item-clone .carousel-link {
  pointer-events: auto !important;
}

/* ===== LINKS E INTERIORES ===== */

#carousel-portals .carousel-link {
  background: var(--c-blue) !important;
  color: white !important;
  text-decoration: none !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  min-height: 120px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
  border: none !important;
  outline: none !important;
  position: relative !important;
  z-index: 10 !important;
  gap: 1rem !important;
}

/* Otimizações UX para diferentes layouts */
#carousel-portals:not(.show-4-5) .carousel-link {
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 1rem !important;
  padding: 1.25rem !important;
}

#carousel-portals .carousel-link:hover {
  background: #2980b9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3) !important;
  text-decoration: none !important;
  color: white !important;
}

/* ===== ÍCONES ===== */

#carousel-portals .carousel-icon {
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  font-size: 3.5rem !important;
  color: white !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 80px !important;
  min-width: 80px !important;
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0 !important;
}

/* Otimizações UX para ícones em layout estático */
#carousel-portals:not(.show-4-5) .carousel-icon {
  font-size: 3.5rem !important;
  min-height: 80px !important;
  min-width: 80px !important;
  width: 80px !important;
  height: 80px !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

#carousel-portals .carousel-icon .fa-solid {
  font-size: 3.5rem !important;
  color: white !important;
  display: block !important;
}

#carousel-portals .carousel-icon-img,
#carousel-portals .carousel-icon-svg {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* Torna branco */
  display: block !important;
}

/* ===== TEXTOS ===== */

#carousel-portals .carousel-text {
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
  color: white !important;
  flex: 1 !important;
  display: block !important;
  word-wrap: break-word !important;
}

/* Otimizações UX para texto em layout estático */
#carousel-portals:not(.show-4-5) .carousel-text {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  margin-top: 0 !important;
  flex: 1 !important;
}

/* ===== SCROLLBAR PERSONALIZADA ===== */

#carousel-portals .carousel-container::-webkit-scrollbar {
  height: 8px !important;
}

#carousel-portals .carousel-container::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

#carousel-portals .carousel-container::-webkit-scrollbar-thumb {
  background: #3498db !important;
  border-radius: 4px !important;
}

#carousel-portals .carousel-container::-webkit-scrollbar-thumb:hover {
  background: #2980b9 !important;
}

/* ===== CONTROLES DE NAVEGAÇÃO ===== */

#carousel-portals .carousel-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 1rem !important;
  padding: 0 2rem !important;
  position: relative !important;
  min-height: 50px !important;
}

#carousel-portals .carousel-btn {
  background: #3498db !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
  margin: 0 0.5rem !important;
}

#carousel-portals .carousel-btn:hover {
  background: #2980b9 !important;
  transform: scale(1.1) !important;
}

#carousel-portals .carousel-btn:disabled {
  background: #bdc3c7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ===== INDICADORES ===== */

#carousel-portals .carousel-indicators {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  width: auto !important;
  min-width: 60px !important;
  max-width: 100px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#carousel-portals .carousel-indicator {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #bdc3c7 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border: 2px solid transparent !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#carousel-portals .carousel-indicator:hover {
  background: #95a5a6 !important;
  transform: scale(1.1) !important;
}

#carousel-portals .carousel-indicator.active {
  background: #3498db !important;
  border-color: #3498db !important;
  transform: scale(1.2) !important;
}

#carousel-portals .carousel-indicator:focus {
  outline: 2px solid #3498db !important;
  outline-offset: 2px !important;
}

/* Garantir centralização perfeita */
#carousel-portals .carousel-controls::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 1px !important;
  height: 1px !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5 !important;
}

/* Responsividade dos indicadores */
@media (max-width: 768px) {
  #carousel-portals .carousel-indicators {
    gap: 0.4rem !important;
  }
  
  #carousel-portals .carousel-indicator {
    width: 8px !important;
    height: 8px !important;
  }
}

@media (max-width: 480px) {
  #carousel-portals .carousel-indicators {
    gap: 0.3rem !important;
  }
  
  #carousel-portals .carousel-indicator {
    width: 6px !important;
    height: 6px !important;
  }
}

/* ========================================
   RESPONSIVIDADE DO CARROSSEL
   ======================================== */

/* ===== BREAKPOINT >1400px (Desktop Grande) ===== */
/* Layout exato da imagem: 3 visíveis + 2 parciais */
#carousel-portals.show-4-5 .carousel-item {
  min-width: calc(25% - 0.8rem) !important;
  max-width: calc(25% - 0.8rem) !important;
  flex: 0 0 calc(25% - 0.8rem) !important;
}

#carousel-portals.show-4-5 .carousel-wrapper {
  margin-left: calc(-0.8rem + 0.8rem) !important;
  justify-content: center !important;
}

/* 1º item - faixa visível à esquerda */
#carousel-portals.show-4-5 .carousel-item:first-child,
#carousel-portals.show-4-5 .carousel-item-static:first-child {
  min-width: calc(25% - 0.8rem) !important;
  max-width: calc(25% - 0.8rem) !important;
  flex: 0 0 calc(25% - 0.8rem) !important;
  opacity: 0.8 !important;
  transform: scale(0.95) !important;
}

/* 5º item - cerca de 1/3 visível à direita */
#carousel-portals.show-4-5 .carousel-item:nth-child(5),
#carousel-portals.show-4-5 .carousel-item-static:nth-child(5) {
  min-width: calc(25% - 0.8rem) !important;
  max-width: calc(25% - 0.8rem) !important;
  flex: 0 0 calc(25% - 0.8rem) !important;
  opacity: 0.8 !important;
  transform: scale(0.95) !important;
}

/* ===== BREAKPOINT ≤1400px (Desktop Médio) ===== */
@media (max-width: 1400px) {
  /* 2 itens visíveis + 2 parciais */
  #carousel-portals.show-4-5 .carousel-item {
    min-width: calc(35% - 0.8rem) !important;
    max-width: calc(35% - 0.8rem) !important;
    flex: 0 0 calc(35% - 0.8rem) !important;
  }
  
  #carousel-portals.show-4-5 .carousel-wrapper {
    margin-left: calc(-0.8rem + 0.8rem) !important;
    justify-content: center !important;
  }
  
  /* 1º item - faixa visível à esquerda */
  #carousel-portals.show-4-5 .carousel-item:first-child,
  #carousel-portals.show-4-5 .carousel-item-static:first-child {
    min-width: calc(35% - 0.8rem) !important;
    max-width: calc(35% - 0.8rem) !important;
    flex: 0 0 calc(35% - 0.8rem) !important;
    opacity: 0.8 !important;
    transform: scale(0.95) !important;
  }
  
  /* 4º item - parcial à direita */
  #carousel-portals.show-4-5 .carousel-item:nth-child(4),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(4) {
    min-width: calc(35% - 0.8rem) !important;
    max-width: calc(35% - 0.8rem) !important;
    flex: 0 0 calc(35% - 0.8rem) !important;
    opacity: 0.8 !important;
    transform: scale(0.95) !important;
  }
  
  /* 5º item - oculto */
  #carousel-portals.show-4-5 .carousel-item:nth-child(5),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(5) {
    display: none !important;
  }
}

/* ===== BREAKPOINT ≤1200px (Desktop Médio-Pequeno) ===== */
@media (max-width: 1200px) {
  /* 4 itens visíveis + 1 parcial */
  #carousel-portals.show-4-5 .carousel-item {
    min-width: calc(35% - 0.8rem) !important;
    max-width: calc(35% - 0.8rem) !important;
    flex: 0 0 calc(35% - 0.8rem) !important;
  }
  
  #carousel-portals.show-4-5 .carousel-wrapper {
    margin-left: calc(-0.8rem + 0.8rem) !important;
  }
  
  #carousel-portals.show-4-5 .carousel-item:first-child,
  #carousel-portals.show-4-5 .carousel-item-static:first-child {
    min-width: calc(35% - 0.75rem) !important;
    max-width: calc(35% - 0.75rem) !important;
    flex: 0 0 calc(35% - 0.75rem) !important;
    opacity: 0.7 !important;
    transform: scale(0.9) !important;
  }
  
  #carousel-portals.show-4-5 .carousel-item:nth-child(5),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(5) {
    min-width: calc(35% - 0.75rem) !important;
    max-width: calc(35% - 0.75rem) !important;
    flex: 0 0 calc(35% - 0.75rem) !important;
    opacity: 0.7 !important;
    transform: scale(0.9) !important;
  }
  
  /* Para menos de 5 itens em telas médias */
  #carousel-portals:not(.show-4-5) .carousel-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 2rem !important;
  }
  
  #carousel-portals:not(.show-4-5) .carousel-item {
    max-width: 450px !important;
    min-height: 160px !important;
  }
  
  .carousel-item {
    min-width: 380px;
    max-width: 400px;
  }
  
  .carousel-link {
    padding: 1.25rem;
    min-height: 100px;
  }
  
  .carousel-icon {
    font-size: 3rem;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    min-height: 70px;
    min-width: 70px !important;
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0 !important;
  }
  
  .carousel-icon .fa-solid {
    font-size: 2.5rem;
  }
  
  .carousel-icon-img,
  .carousel-icon-svg {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
  }
  
  .carousel-text {
    font-size: 1.2rem;
  }
}

/* ===== BREAKPOINT ≤992px (Tablet Grande) ===== */
@media (max-width: 992px) {
  /* 1 item visível + 2 parciais */
  #carousel-portals.show-4-5 .carousel-item {
    min-width: calc(60% - 0.75rem) !important;
    max-width: calc(60% - 0.75rem) !important;
    flex: 0 0 calc(60% - 0.75rem) !important;
  }
  
  #carousel-portals.show-4-5 .carousel-wrapper {
    margin-left: calc(-0.8rem + 0.8rem) !important;
    justify-content: center !important;
  }
  
  /* 1º item - faixa visível à esquerda */
  #carousel-portals.show-4-5 .carousel-item:first-child,
  #carousel-portals.show-4-5 .carousel-item-static:first-child {
    min-width: calc(35% - 0.8rem) !important;
    max-width: calc(35% - 0.8rem) !important;
    flex: 0 0 calc(35% - 0.8rem) !important;
    opacity: 0.7 !important;
    transform: scale(0.9) !important;
  }
  
  /* 3º item - parcial à direita */
  #carousel-portals.show-4-5 .carousel-item:nth-child(3),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(3) {
    min-width: calc(35% - 0.8rem) !important;
    max-width: calc(35% - 0.8rem) !important;
    flex: 0 0 calc(35% - 0.8rem) !important;
    opacity: 0.7 !important;
    transform: scale(0.9) !important;
  }
  
  /* 4º e 5º itens - ocultos */
  #carousel-portals.show-4-5 .carousel-item:nth-child(4),
  #carousel-portals.show-4-5 .carousel-item:nth-child(5),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(4),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(5) {
    display: none !important;
  }
}

/* ===== BREAKPOINT ≤768px (Tablet) ===== */
@media (max-width: 768px) {
  /* 1 item visível + 1 parcial */
  #carousel-portals.show-4-5 .carousel-item {
    min-width: calc(70% - 0.8rem) !important;
    max-width: calc(70% - 0.8rem) !important;
    flex: 0 0 calc(70% - 0.8rem) !important;
  }
  
  #carousel-portals.show-4-5 .carousel-wrapper {
    margin-left: calc(-0.8rem + 0.8rem) !important;
    justify-content: center !important;
  }
  
  /* 1º item - faixa visível à esquerda */
  #carousel-portals.show-4-5 .carousel-item:first-child,
  #carousel-portals.show-4-5 .carousel-item-static:first-child {
    min-width: calc(100% - 0.8rem) !important;
    max-width: calc(100% - 0.8rem) !important;
    flex: 0 0 calc(100% - 0.8rem) !important;
    opacity: 1 !important;
    transform: scale(0.9) !important;
  }
  
  /* 2º, 3º, 4º e 5º itens - ocultos */
  #carousel-portals.show-4-5 .carousel-item:nth-child(2),
  #carousel-portals.show-4-5 .carousel-item:nth-child(3),
  #carousel-portals.show-4-5 .carousel-item:nth-child(4),
  #carousel-portals.show-4-5 .carousel-item:nth-child(5),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(2),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(3),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(4),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(5) {
    display: none !important;
  }
}

/* ===== BREAKPOINT ≤375px (Mobile Muito Pequeno) ===== */
@media (max-width: 400px) {
  /* 1 item visível + 1 parcial */
  #carousel-portals.show-4-5 .carousel-item {
    min-width: calc(80% - 0.8rem) !important;
    max-width: calc(80% - 0.8rem) !important;
    flex: 0 0 calc(80% - 0.8rem) !important;
  }
  
  #carousel-portals.show-4-5 .carousel-wrapper {
    margin-left: calc(-10% + 0.8rem) !important;
    justify-content: center !important;
  }
  
  /* 1º item - totalmente visível */
  #carousel-portals.show-4-5 .carousel-item:first-child,
  #carousel-portals.show-4-5 .carousel-item-static:first-child {
    min-width: calc(100% - 0.8rem) !important;
    max-width: calc(100% - 0.8rem) !important;
    flex: 0 0 calc(100% - 0.8rem) !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  
  /* 2º, 3º, 4º e 5º itens - ocultos */
  #carousel-portals.show-4-5 .carousel-item:nth-child(2),
  #carousel-portals.show-4-5 .carousel-item:nth-child(3),
  #carousel-portals.show-4-5 .carousel-item:nth-child(4),
  #carousel-portals.show-4-5 .carousel-item:nth-child(5),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(2),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(3),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(4),
  #carousel-portals.show-4-5 .carousel-item-static:nth-child(5) {
    display: none !important;
  }
  
  /* Ajustes para menos de 5 itens em mobile muito pequeno */
  #carousel-portals:not(.show-4-5) .carousel-wrapper {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  #carousel-portals:not(.show-4-5) .carousel-item {
    max-width: 280px !important; /* Reduzido para mobile */
    min-height: 120px !important;
  }
  
  /* Reduções de tamanho para mobile muito pequeno */
  .carousel-item {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  .carousel-link {
    padding: 1rem !important;
    min-height: 80px !important;
  }
  
  .carousel-icon {
    font-size: 2.5rem !important;
    min-height: 60px !important;
    min-width: 60px !important;
    width: 60px !important;
    height: 60px !important;
  }
  
  .carousel-icon .fa-solid {
    font-size: 2.5rem !important;
  }
  
  .carousel-icon-img,
  .carousel-icon-svg {
    width: 60px !important;
    height: 60px !important;
  }
  
  .carousel-text {
    font-size: 1rem !important;
  }
}

/* ===== CONTROLE DE ESPAÇAMENTO COM FOOTER ===== */
/* Remove espaçamento extra do container da última seção */
#carousel-portals .container {
  margin-bottom: 0 !important;
}

#carousel-portals .section-body {
  margin-bottom: 0 !important;
}