/* Incognit Cloud Website Styles - Version 1.0.1 - Updated: Sept 3, 2025 */

:root {
  --color-bg: #1a1c1c;
  --color-accent: #1ad1c9;
  --color-text: #f0f1f0;
  --color-green: #adf29c;
  --color-orange: #f16a21;
  --color-blue: #665cd9;
}

* {
  box-sizing: border-box;
}

/* REMOVE FOCUS OUTLINE - No blue border on focus */
*:focus,
*:focus-visible,
button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

body {
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  scroll-behavior: smooth;
  line-height: 1.6;
  cursor: default;
}

/* GLOBAL CURSOR RULES - PRIORITY ORDER */

/* 1. Default cursor for most elements */
html, body, *, *::before, *::after {
  cursor: default;
}

/* 2. POINTER CURSOR - All clickable elements */
a, 
button, 
[role="button"], 
[onclick], 
[href], 
.clickable,
.social-icon,
.social-link,
.nav-link,
.footer-social-item,
.footer-social-links a,
.footer-contact-item,
.gallery-indicator,
.gallery-slide,
.carousel-nav,
.hamburger-menu,
.mobile-menu a,
.servicenow-store-btn,
.logo,
.logo-img,
.card-clickable,
.service-card,
.apply-button,
.directions-btn,
.footer-directions-btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
.btn,
.button,
[data-clickable="true"] {
  cursor: pointer !important;
}

/* 2.1 POINTER CURSOR - All child elements within clickable elements */
a *,
button *,
[role="button"] *,
[onclick] *,
[href] *,
.clickable *,
.social-icon *,
.social-link *,
.nav-link *,
.footer-social-item *,
.footer-social-links a *,
.footer-contact-item *,
.gallery-indicator *,
.gallery-slide *,
.gallery-slide img,
.carousel-nav *,
.hamburger-menu *,
.mobile-menu a *,
.servicenow-store-btn *,
.logo *,
.logo-img *,
.card-clickable *,
.service-card *,
.apply-button *,
.directions-btn *,
.footer-directions-btn *,
input[type="submit"] *,
input[type="button"] *,
input[type="reset"] *,
.btn *,
.button *,
[data-clickable="true"] * {
  cursor: pointer !important;
}

/* 3. TEXT CURSOR - Input fields */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), 
textarea, 
[contenteditable="true"], 
[contenteditable=""] {
  cursor: text !important;
}

/* 4. SPECIAL CURSORS - Custom drag cursor is handled in specific CSS files */

/* 5. GRAB CURSORS - Regular draggable elements without custom cursor */
.gallery-track:not(.custom-drag-cursor), 
.full-team-track:not(.custom-drag-cursor), 
.good-stuff-track:not(.custom-drag-cursor), 
[data-draggable="true"]:not(.custom-drag-cursor) {
  cursor: grab !important;
}

.gallery-track:not(.custom-drag-cursor):active, 
.full-team-track:not(.custom-drag-cursor):active, 
.good-stuff-track:not(.custom-drag-cursor):active,
.gallery-track:not(.custom-drag-cursor).dragging, 
.full-team-track:not(.custom-drag-cursor).dragging, 
.good-stuff-track:not(.custom-drag-cursor).dragging {
  cursor: grabbing !important;
}

/* 6. DISABLED ELEMENTS */
[disabled], 
.disabled, 
[aria-disabled="true"] {
  cursor: not-allowed !important;
}

/* 7. LOADING STATES */
.loading, 
[aria-busy="true"] {
  cursor: wait !important;
}

/* 8. HELP CURSOR */
[title]:not(input):not(textarea):not(a):not(button):not([role="button"]) {
  cursor: help !important;
}

/* 9. FORCE POINTER CURSOR - Override any competing rules for clickable content */
/* Text elements within clickable containers */
a p, a span, a h1, a h2, a h3, a h4, a h5, a h6, a div, a section,
button p, button span, button h1, button h2, button h3, button h4, button h5, button h6, button div,
.clickable p, .clickable span, .clickable h1, .clickable h2, .clickable h3, .clickable h4, .clickable h5, .clickable h6,
.service-card p, .service-card span, .service-card h1, .service-card h2, .service-card h3, .service-card h4, .service-card h5, .service-card h6,
.gallery-slide p, .gallery-slide span, .gallery-slide h1, .gallery-slide h2, .gallery-slide h3,
.footer-social-item p, .footer-social-item span, .footer-contact-item p, .footer-contact-item span {
  cursor: pointer !important;
}

/* Image elements within clickable containers */
a img, 
button img,
.clickable img,
.service-card img,
.gallery-slide img,
.footer-social-item img,
.footer-contact-item img,
.carousel-nav img,
.hamburger-menu img,
.servicenow-store-btn img,
.logo img,
.apply-button img,
.directions-btn img,
.footer-directions-btn img {
  cursor: pointer !important;
}

/* Icon elements within clickable containers */
a .icon, a .social-icon, a .card-icon, a .footer-card-icon,
button .icon, button .social-icon, button .card-icon,
.clickable .icon, .clickable .social-icon,
.service-card .icon, .service-card .service-icon, .service-card .arrow-icon,
.footer-social-item .icon, .footer-social-item .social-icon, .footer-social-item .footer-card-icon,
.footer-contact-item .icon, .footer-contact-item .footer-card-icon {
  cursor: pointer !important;
}

/* 10. ULTIMATE OVERRIDE - Force pointer cursor on ALL content within clickable elements */
/* This rule must be last to override any conflicting CSS */
[href] *, 
[onclick] *,
a:not([href=""]) *,
button:not([disabled]) *,
.gallery-slide *,
.service-card *,
.apply-button *,
.footer-social-item *,
.footer-contact-item *,
.carousel-nav *,
.servicenow-store-btn *,
.directions-btn *,
.footer-directions-btn * {
  cursor: inherit !important;
}

/* Ensure parent containers set the correct cursor */
[href]:not([href=""]),
[onclick],
a:not([href=""]),
button:not([disabled]),
.gallery-slide,
.service-card,
.apply-button,
.footer-social-item,
.footer-contact-item,
.carousel-nav,
.servicenow-store-btn,
.directions-btn,
.footer-directions-btn {
  cursor: pointer !important;
}

/* 11. FINAL OVERRIDE - Ensure images within links always show pointer */
a img,
.gallery-slide img,
button img,
[onclick] img,
[href] img {
  cursor: pointer !important;
  pointer-events: none; /* Let clicks pass through to parent */
}

/* 12. FINAL OVERRIDE - Ensure all text within clickable elements shows pointer */
a p, a span, a div, a h1, a h2, a h3, a h4, a h5, a h6,
.gallery-slide p, .gallery-slide span, .gallery-slide div,
button p, button span, button div,
[onclick] p, [onclick] span, [onclick] div,
.service-card p, .service-card span, .service-card div, .service-card h3,
.footer-social-item p, .footer-social-item span,
.footer-contact-item p, .footer-contact-item span {
  cursor: pointer !important;
}

/* DEBUG: Fix para telas muito pequenas */
@media (max-width: 320px) {
  * {
    max-width: 100vw !important;
  }
  
  /* Exceção para o gallery slides container */
  .gallery-slides-container {
    max-width: none !important;
  }
  
  body {
    overflow-x: hidden !important;
  }
}

/* Remove margens padrão de todas as seções */
section {
  margin: 0;
  padding: 0;
}

/* Melhorias de acessibilidade */
*:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Melhoria de performance para animações */
.impact-card,
.hero-astronaut,
.astronaut-parallax {
  will-change: transform;
}



/* HEADER E MENU */
header {
  position: fixed; /* Torna o menu fixo */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Garante que o menu fique acima de outros elementos */
  padding: 1rem 1.5rem;
  background: var(--color-bg); /* Mantém o fundo visível durante o scroll */
  box-shadow: 0 2px 5px #1a1c1c;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

header .logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-img {
  height: 36px;
  width: auto;
  display: block;
  cursor: pointer !important;
}

header nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Adiciona espaçamento entre os itens */
  width: 100%;
}

header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
  align-items: center;
}

nav ul li {
  position: relative;
}

header nav a {
  text-decoration: none;
  color: var(--color-text);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 30px;
  transition: 0.3s ease;
  font-size: clamp(0.7rem, 1.3vw, 1.1rem);
  font-weight: 200;
  display: inline-block;
  min-width: 0; /* Prevents flex shrinking issues */
  white-space: nowrap; /* Prevents text wrapping */
}

header nav a:hover {
  background: #1ad1c83b;
  color: #1ad1c9;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Active menu item styling - maintains consistent layout */
header nav li.active a {
  color: var(--color-accent);
  font-weight: 200; /* Same weight as normal state to prevent movement */
  background: rgba(26, 209, 201, 0.1);
}

header nav li.active a:hover {
  background: #1ad1c83b;
  color: #1ad1c9;
}

/* ServiceNow Store Button */
.servicenow-store-btn {
  background: #1a1c1c;
  color: #f0f1f0;
  padding: 6px 14px;
  border-radius: 25px;
  border-color: #62d84e;
  border-width: 1px;
  border-style: solid;
  text-decoration: none;
  font-size: clamp(0.75rem, 0.8vw, 1.1rem);
  font-weight: 200;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* Move o botão para o lado direito */
  order: 1;
}

.servicenow-store-btn:hover {
  background: #1a1c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(98, 216, 78, 0.3);
  color: #f0f1f0;
  font-weight: 400;
}

.servicenow-store-btn img {
  vertical-align: baseline; /* Alinha o logo com o texto pela baseline */
  height: clamp(12px, 0.8vw, 14px);
  width: auto;
  margin-bottom: clamp(1px, 2px, 4px);
}

/* Mobile Menu Default Styles */
.mobile-menu {
  display: none;
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }

  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #1a1c1c;
  }

  .mobile-menu-logo {
    height: 40px;
  }

  .hamburger-menu {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
  }

  /* Center the mobile menu popup and add close button */
.mobile-menu-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #1a1c1c;
  color: #f0f1f0;
  width: 80%; /* Adjusted for better responsiveness */
  max-width: 300px; /* Slightly larger for better visibility */
  padding: 2rem; /* Adjusted padding */
  border-radius: 10px; /* Slightly less rounded */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow for better visibility */
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-menu-popup.active {
  display: flex;
}

.mobile-menu-popup .close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
}

/* Add dark transparent background overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for better contrast */
  z-index: 999;
}

/* Show overlay when active */
.mobile-menu-overlay.active {
  display: block;
}

  .mobile-menu-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza os itens no popup */
    text-align: center; /* Justifica o texto ao centro */
    gap: 1rem;
  }

  .mobile-menu-popup ul li a {
    color: #fff;
    text-decoration: none;
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    font-weight: 300;
    padding: 8px 20px;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: block;
    /* Remove default browser styles */
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Active mobile menu item - matches desktop style */
  .mobile-menu-popup ul li.active a {
    color: var(--color-accent);
    background: rgba(26, 209, 201, 0.15);
    font-weight: 300;
  }
  
  /* Hover state for mobile menu items */
  .mobile-menu-popup ul li a:hover,
  .mobile-menu-popup ul li a:focus {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
  }
  
  /* Active item hover state */
  .mobile-menu-popup ul li.active a:hover,
  .mobile-menu-popup ul li.active a:focus {
    background: rgba(26, 209, 201, 0.25);
    color: var(--color-accent);
    outline: none;
  }

  .mobile-menu-popup .servicenow-store-btn {
    background: var(--color-bg);
    color: var(--color-text);
    padding: 7px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: clamp(0.7rem, 2.2vw, 0.9rem);
    font-weight: 400;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 1rem auto; /* Centraliza horizontalmente */
    min-width: 120px;
    line-height: 1.2;
  }

  /* Align ServiceNow logo with text in mobile menu popup */
  .mobile-menu-popup .servicenow-store-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .mobile-menu-popup .servicenow-store-btn img {
    vertical-align: middle;
    margin-bottom: 3px;
    height: clamp(10px, 1.5vw, 16px);
    width: auto;
  }

}


/* Hide mobile menu on larger screens */
@media (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
}

/* Remove default menu for all screen sizes */
.default-menu {
  display: none;
}

/* Ensure default menu is hidden on mobile */
@media (max-width: 768px) {
  .default-menu {
    display: none !important;
  }
}

/* Ensure header and default menu are hidden on mobile */
@media (max-width: 768px) {
  header {
    display: none !important;
  }
}




/* HERO SECTION */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
}

.bg-hero-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.bg-hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-gradient-overlay {
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 120%; /* menor que 200%, não apaga imagem */
  background: linear-gradient(to top, #1a1c1c 1%, transparent 80%);
  z-index: 1;
}

.hero-title-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.hero-title-container h1 {
  font-weight: 800;
  font-size: clamp(4.5rem, 8vw, 11rem); /* mínimo 3rem já é grande */
  line-height: 0.9;
  margin: 0 0 1rem 0;
  color: var(--color-text);
}

.title-line2, .title-line3 {
  color: var(--color-accent);
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem); /* começa maior que antes */
  font-weight: 300;
  color: var(--color-text);
  opacity: 0.9;
}

/* Style for the ServiceNow logo */
.servicenow-logo {
    width: clamp(100px, 13vw, 150px); /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}

/* Astronaut */
.hero-astronaut-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

.hero-astronaut-floating {
  width: clamp(180px, 20vw, 350px); /* Tamanho maior e mais equilibrado */
  height: auto;
  filter: drop-shadow(0 15px 40px rgba(0,0,0,0.5))
          drop-shadow(0 5px 15px rgba(0,0,0,0.4))
          drop-shadow(0 25px 60px rgba(27,210,202,0.2));
  transform: none; /* Remove qualquer efeito de scale */
}

/* =========================
   RESPONSIVE (MOBILE ≤480px)
   ========================= */
@media (max-width: 375px) {
  .hero-title-container h1 {
  font-size: clamp(4.5rem, 9vw, 11rem); /* mínimo 3rem já é grande */
    line-height: 0.9;
  }

  .hero-subtitle {
    font-size: 1rem;   /* maior que antes */
  }

  .hero-gradient-overlay {
    height: 110%; /* cobre menos */
    background: linear-gradient(
      to top,
      rgb(26, 28, 28) 5%,  /* mais claro e começa suave */
      transparent 70%
    );
  }
}



/* MARQUEE SECTION */
.marquee-section {
  padding: 1rem 0;
  background: var(--color-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.marquee {
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee-content {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-text);
  text-align: center;
  background: linear-gradient(90deg, var(--color-accent), var(--color-orange), var(--color-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.marquee-content .highlight {
  color: var(--color-accent);
  font-weight: 400;
}




/* IMPACT SECTION */
.impact-section {
  padding: 0;
  background: var(--color-bg);
  max-width: 1400px;
  margin: 0 auto 50px auto;
  width: 100%;
}

.impact-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  padding: 1rem 4rem;
  width: 100%;
}

.impact-title-container {
  flex: 0 0 35%;
}

.impact-title {
  font-family: 'Poppins', sans-serif;
  font-size: 6rem;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.impact-title .highlight {
  color: var(--color-accent);
  font-weight: 600;
}

/* Cards container */
.impact-cards-container {
  flex: 1;
  display: flex;
  flex-direction: row; /* lado a lado no desktop */
  justify-content: space-between;
  gap: 1rem;
}

/* Card base */
.impact-card {
  flex: 1;
  height: 300px;          /* altura fixa (mais retangular) */
  border-radius: 15px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.impact-card.green {
  background-color: var(--color-orange);
  color: #f0f1f0;
}

.impact-card.orange {
  background-color: var(--color-green);
  color: #1a1c1c;
}

.impact-card.purple {
  background-color: var(--color-blue);
  color: #fff;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-bottom {
  margin-top: 10px;
  text-align: center;
}

/* Garantindo o efeito de hover nos cards da seção IMPACT */
.impact-card:hover {
  transform: translateY(-10px) !important; /* Move o card levemente para cima */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important; /* Adiciona uma sombra suave */
}

/* --- TEXTOS COM CLAMP --- */
.impact-card .number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.9rem, 4vw, 4rem);
  margin: 0;
  font-weight: 600;
  line-height: 1;
}

.impact-card.green .number {
  font-size: clamp(2.5rem, 6vw, 6rem);
  color: #f0f1f0;
}

.impact-card .label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.2rem);
  font-weight: 500;
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.impact-card.green .label {
  font-size: clamp(0.9rem, 1vw, 1.2rem);
  color: #f0f1f0;
}

.impact-card .description {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 1vw, 1.2rem);
  line-height: 1.5;
  margin: 1rem 0;
  font-weight: 300;
  text-align: center;
}

.impact-card .card-icon {
  width: 80px;
  height: 80px;
  margin: 1rem 0;
  object-fit: contain;
  display: block;
}


/* --- RESPONSIVIDADE --- */
@media (max-width: 1200px) {
  .impact-content {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .impact-title-container {
    flex: none;
    width: 100%;
    text-align: center;
  }

  .impact-title {
    font-size: clamp(3rem, 6vw, 5rem);
    white-space: normal;
    text-align: center;
  }

  .impact-cards-container {
    flex-direction: column;
    width: 100%;
  }

  .impact-card {
    width: 100%;
    height: auto; /* deixa flexível */
  }
}

@media (max-width: 768px) {
  .impact-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }

  .impact-card {
    padding: 1rem;
  }
}

@media (max-width: 375px) {
  .impact-title {
    font-size: clamp(2rem, 9vw, 3rem);
    margin-top: 2rem;
  }

  .impact-card {
    align-items: center;
    gap: 0.5rem;
  }

  .card-content {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0.5rem;
  }

  .impact-card .card-icon {
    width: 50px;
    height: 50px;
    margin: 0.5rem 0;
  }

  .impact-card:nth-child(3) .card-icon {
    width: 60px;
    height: 60px;
  }
}






/* CONSULTANCY SECTION */
.consultancy {
  position: relative;
  background: url("images/stars-bg.jpg") no-repeat center center/cover;
  padding: 1rem clamp(1rem, 5vw, 6rem) 2rem clamp(1rem, 5vw, 6rem);
  /* padding lateral agora é fluido: mínimo 1rem, máximo 6rem */
  display: flex;
  justify-content: center;
  overflow: hidden;
  grid-template-columns: 1.5fr 1.5fr;
}

.consultancy-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1400px;
  gap: clamp(1rem, 6vw, 10rem); /* gap também se adapta */
}

.consultancy-text {
  flex: 1 1 500px;
  color: var(--color-text);
  z-index: 2;
}

.consultancy-image {
  flex: 1 1 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
}

.bg-astronaut-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 1;
}

.bg-astronaut {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.consultancy-text h2 {
  color: #f0f1f0;
  font-weight: 300;
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  line-height: 1.4;
  margin-bottom: 2rem;
}

.consultancy-text h2 span {
  color: #1ad1c9;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.2vw, 1.9rem);
}

.consultancy-text span {
  color: var(--color-accent);
  font-weight: 300;
}

.consultancy-text p {
  margin-bottom: 1rem;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.4;
  font-weight: 100;
}


/* Astronaut Parallax */
.astronaut-parallax {
  max-width: 500px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  z-index: 2;
  transform: rotate(-20deg); /* Initial position */
  margin: 0 auto; /* Centraliza horizontalmente */
}

/* Responsivo */
@media (max-width: 480px) {
  .consultancy-container {
    flex-direction: column;
    text-align: left;
    gap: 1.5rem;
    align-items: center; /* força centralização de tudo */
    padding-bottom: 0 !important;
  }

  .consultancy-text {
    padding: 0 1.5rem;
    width: 100%;
    margin: 0;
    text-align: left; /* textos alinhados à esquerda no mobile */
  }

  .consultancy-image {
    max-width: 280px;
    justify-content: center; /* centraliza horizontalmente */
    align-items: center; /* centraliza verticalmente */
    margin: 0 auto; /* garante centralização como fallback */
  }

  .astronaut-parallax {
    max-width: 280px;
    margin: 2rem auto 0 auto;
    display: block; /* Garante que seja tratado como elemento de bloco para centralização */
  }

  .bg-astronaut-container {
    width: 140%;
    height: 140%;
    opacity: 1;
  }
}



/* OUR SERVICES SECTION */
.services-section {
  background: var(--color-bg);
  background-image: 
    linear-gradient(to bottom, 
      #1a1c1c 0%,  
      transparent 75%, 
      #1a1c1c 100%),
          linear-gradient(to top,
      #1a1c1c 0%,  
      transparent 75%, 
      #1a1c1c 100%),
          url('../images/blue-rapport.png');
  background-size: 30% auto; /* Repeat rapport more frequently in width */
  background-repeat: repeat; /* Ensure consistent repetition */
  padding: 6rem 0 6rem 0; /* Reduced top padding */
  position: relative;
  overflow: hidden;
  margin: 0 auto; /* Center align the section */
  justify-content: center;
}

.services-container {
  max-width: 1400px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 3rem;
  margin: 0 auto; /* Center the container horizontally */
  align-items: center; /* Center align items vertically */
}

.services-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 2rem;
  min-height: 60px;
  gap: 2rem;
}

.services-title {
  font-family: 'Poppins', sans-serif;
  font-size: 6rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1rem;
  line-height: 1rem;
}

.services-title .highlight {
  color: var(--color-accent);
}

.services-subtitle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.7rem, 2.5vw, 1rem);
  color: #f0f1f0;
  margin-left: 1rem;
  align-self: center;
}

.from-text {
  font-weight: 300;
  margin-bottom: 0rem;
  opacity: 1;
}

.excellence-text {
  font-weight: 500;
  color: #f0f0f0
}

.one-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: fit-content;
  align-self: center;
}

.one-arrow-icon img {
  height: 3rem;
  object-fit: contain;
  opacity: 1;
}

.arrow-icon {
  position: flex;
  size-adjust: flex;
  right: 0;
  margin-top: 1rem;
  transform: translateY(-50%);
}

.services-content {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center; /* Center align content horizontally */
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Reduce card size to fit within section limits */
  gap: 10px;
  max-width: 1200px;
  
}

.service-card {
  min-width: 200px; /* Current minimum size */
  width: 100%; /* Allows the card to grow with the container */
  max-height: 200px;
}

.service-card {
  background: #1a1c1c09;
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(3px);
}

.service-card.dark {
  background: #1a1c1cb1;
  border-color: var(--color-accent);
}

.service-card.accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(26, 209, 201, 0.4);
  border-color: #f0f1f0;
}

.service-card.accent:hover {
  box-shadow: 0 15px 40px rgba(26, 209, 200, 0.306);
}

/* Hover overlay for service cards */
.service-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f0f1f0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 18px;
  padding: 1.5rem 1.5rem;
}

.service-card:hover .service-hover-overlay {
  opacity: 1;
}

.service-hover-content {
  text-align: center;
  color: var(--color-bg);
}


.service-hover-content p {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  font-weight: 300;
  color: var(--color-bg);
}

.service-icon {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.service-card:hover .arrow-icon img {
  transform: scale(1.1);
}

.service-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}

.service-card.accent .service-title {
  color: var(--color-bg);
  font-weight: 300;
}

/* Responsive Design for Services Section */

@media (max-width: 1200px) {
  .services-section {
    padding: 2rem 2rem 4rem 2rem !important;
    margin-top: 0rem !important;
  }
  
  .services-container {
    gap: 30px;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .service-card {
    min-height: 230px;
    padding: 2rem 1rem;
  }
  
  .services-title {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
    line-height: 1;
  }
  
  .services-subtitle {
    font-size: clamp(0.7rem, 6vw, 1rem);
  }
  
  .arrow-icon img {
    width: 64px;
    height: 64px;
  }

  .service-hover-content p {
  font-size: 16px;
  line-height: 1.6;
}

/* Ajustes para o comportamento de toggle dos cards de serviço */
.service-card {
  position: relative;
}

.service-card .service-hover-overlay {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.service-card.flipped .service-hover-overlay {
  opacity: 1;
  visibility: visible;
}

.service-card .service-title {
  transition: opacity 0.3s ease;
}

.service-card.flipped .service-title {
  opacity: 0;
}
}



/* EXPERTISE MODULES SECTION */
.expertise-section {
  background: var(--color-bg);
  padding: 1rem 3rem;
  position: relative;
}

.expertise-container {
  max-width: 1400px;
  margin: 0 auto;
}

.expertise-header {
  text-align: center;
  margin-bottom: 4rem;
}

.expertise-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.7rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  border: 2px solid var(--color-accent);
  border-radius: 100px;
  padding: 1rem 3rem;
  display: inline-block;
}

.expertise-highlight {
  color: var(--color-accent);
}

.expertise-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Pattern Grid */
.expertise-pattern {
  display: flex;
  justify-content: center;
  margin-left: -20px;
}

.pattern-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}

.pattern-row {
  display: flex;
  gap: 3px;
}

.pattern-row:nth-child(even) {
  margin-left: 20px;
}

.pattern-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

/* Gradient colors for circles */
.pattern-circle.c1 { background: #1ad1c877; }
.pattern-circle.c2 { background: #1ad1c8a8; }
.pattern-circle.c3 { background: #1ad1c8d7; }
.pattern-circle.c4 { background: #1ad1c8; }
.pattern-circle.c5 { background: #1ad1c9; }
.pattern-circle.c6 { background: #adf29c; }
.pattern-circle.c7 { background: #adf29c; }
.pattern-circle.c8 { background: #adf29c; }
.pattern-circle.c9 { background: #665cd9da; }
.pattern-circle.c10 { background: #665cd993; }

/* Modules */
.expertise-modules {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.expertise-module {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.module-percentage {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 7rem;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}

.expertise-module.cyan .module-percentage {
  color: #1ad1c9;
}

.expertise-module.green .module-percentage {
  color: #adf29c;
}

.expertise-module.purple .module-percentage {
  color: #665cd9;
}

.module-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.module-item {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.4;
  font-weight: 100;
}

.module-label-cyan {
  color: #1ad1c9;
  font-weight: 400;
}
.module-label-green {
  color: #adf29c;
  font-weight: 400;
}
.module-label-purple {
  color: #665cd9;
  font-weight: 400;
}

/* Consolidated Responsive Design for Expertise Section */
@media (max-width: 1200px) {
  .expertise-content {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .expertise-title {
    font-size: clamp(1.7rem, 5vw, 4rem);
    padding: 0.8rem 2rem;
  }

  .module-percentage {
    font-size: 6rem;
  }

  .expertise-section {
    padding: 4rem 1rem;
  }

  .expertise-module {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .pattern-circle {
    width: 25px;
    height: 25px;
  }

  .pattern-row,
  .pattern-grid {
    gap: 6px;
  }

  .pattern-grid {
    margin: 0 auto; /* Centraliza a grid na página */
    justify-content: center; /* Garante alinhamento central */
  }
}

/* Responsividade da pattern-grid */
@media (max-width: 768px) {
  .pattern-grid {
    max-width: 90%; /* Limita a largura máxima para caber na tela */
    transform: scale(0.9); /* Reduz proporcionalmente o tamanho */
    margin: 0 auto; /* Centraliza na tela */
  }
}

@media (max-width: 480px) {
  .pattern-grid {
    transform: scale(0.8); /* Reduz ainda mais para telas menores */
  }
}


/*------------------------------*/
/* KEY SECTORS SECTION */
/*------------------------------*/

.key-sectors-section {
  padding: 6rem 1rem 6rem 3rem; /* Extra bottom padding for progress bar */
  background: var(--color-bg);
  overflow: hidden;
}

.key-sectors-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 100px;
  align-items: center;
}

/* Left Side - Text and Buttons */
.key-sectors-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.key-sectors-header h2 {
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0px;
  color: var(--color-text);
  max-width: 100%;
}

.key-sectors-highlight {
  color: var(--color-accent);
}

.key-sectors-subtitle {
  font-size: 1.5rem;
  color: var(--color-text);
  top: 2rem;
  font-weight: 400;
  max-width: 90%;
}

.sector-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sector-btn {
  background: transparent;
  border: 1px solid rgba(240, 241, 240, 0.2);
  color: var(--color-text);
  padding: 5px 15px;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  text-align: center;
  border-radius: 15px;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
}

.sector-btn:hover,
.sector-btn.active {
  border-color: var(--color-accent);
  background: rgba(26, 209, 201, 0.1);
  color: #1ad1c9;
}

/* Sector-specific button colors */
.sector-btn[data-sector="finance"]:hover,
.sector-btn[data-sector="finance"].active {
  border-color: #adf29c;
  background: rgba(173, 242, 156, 0.1);
  color: #adf29c;
}

.sector-btn[data-sector="healthcare"]:hover,
.sector-btn[data-sector="healthcare"].active {
  border-color: #ff6a13;
  background: rgba(255, 106, 19, 0.1);
  color: #ff6a13;
}

.sector-btn[data-sector="manufacturing"]:hover,
.sector-btn[data-sector="manufacturing"].active {
  border-color: #00548c;
  background: rgba(0, 84, 140, 0.1);
  color: #00548c;
}

.sector-btn[data-sector="automotive"]:hover,
.sector-btn[data-sector="automotive"].active {
  border-color: #1ad1c9;
  background: rgba(26, 209, 201, 0.1);
  color: #1ad1c9;
}

.sector-btn[data-sector="business-services"]:hover,
.sector-btn[data-sector="business-services"].active {
  border-color: #665cd9;
  background: rgba(102, 92, 217, 0.1);
  color: #665cd9;
}

.sector-btn[data-sector="biotech"]:hover,
.sector-btn[data-sector="biotech"].active {
  border-color: #adf29c;
  background: rgba(173, 242, 156, 0.1);
  color: #adf29c;
}

.sector-btn[data-sector="transportation"]:hover,
.sector-btn[data-sector="transportation"].active {
  border-color: #ff6a13;
  background: rgba(255, 193, 7, 0.1);
  color: #ff6a13;
}

.sector-btn[data-sector="food-industry"]:hover,
.sector-btn[data-sector="food-industry"].active {
  border-color: #665cd9;
  background: rgba(102, 92, 217, 0.1);
  color: #665cd9;
}

.sector-btn[data-sector="utilities"]:hover,
.sector-btn[data-sector="utilities"].active {
  border-color: #1ad1c9;
  background: rgba(26, 209, 201, 0.1);
  color: #1ad1c9;
}

.sector-btn[data-sector="military"]:hover,
.sector-btn[data-sector="military"].active {
  border-color: #00548c;
  background: rgba(0, 84, 140, 0.1);
  color: #00548c;
}

/* Right Side - Carousel */
.key-sectors-right {
  position: relative;
  width: 100%;
  max-width: 600px;
  justify-self: center;
  overflow: visible; /* Ensure progress bar is not clipped */
}

.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}

.carousel-wrapper {
  flex: 1;
  overflow: hidden;
  border-radius: 15px;
  max-width: 600px; /* Increased width for better space usage */
}

.carousel-track {
  display: flex;
  gap: 30px;
  transition: transform 1s ease-in-out;
  padding: 80px 0 80px 0; /* Reduced top padding to move cards up */
  transform: translateX(160px); /* Even better centering */
  align-items: flex-end; /* Align cards by bottom for upward growth */
}

/* Infinite carousel: disable transition during jump */
.carousel-track.no-transition {
  transition: none !important;
}

/* Disable transitions on cards during jump */
.sector-card.no-transition {
  transition: none !important;
}

/* Disable transitions on card children during jump */
.sector-card.no-transition .card-front,
.sector-card.no-transition .card-back {
  transition: none !important;
}

/* Sector Cards */
.sector-card {
  min-width: 120px;
  height: 120px;
  width: 120px;
  position: relative;
  border-radius: 20px;
  background: rgba(26, 28, 28, 0.8); /* Darker background for light text */
  backdrop-filter: blur(10px);
  transition: width 0.6s ease-in-out, height 0.6s ease-in-out, min-width 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
  perspective: 1000px;
  flex-shrink: 0;
  transform-origin: bottom center; /* Growth from bottom to top */
}

.sector-card.center {
  min-width: 200px;
  height: 280px; /* Increased height for better info display */
  width: 200px;
  z-index: 10;
  box-shadow: 0px 5px 20px rgba(26, 209, 201, 0.3);
}

/* Center card colors - maintain sector color when centered */
.sector-card.center[data-sector="finance"] {
  background: linear-gradient(135deg, #adf29c, #adf29c76);
  box-shadow: 0px 5px 20px #adf29c76;
}

.sector-card.center[data-sector="healthcare"] {
  background: linear-gradient(135deg, #ff6a13, #ff6a13c4);
  box-shadow: 0px 5px 20px #ff6a13c4;
}

.sector-card.center[data-sector="manufacturing"] {
  background: linear-gradient(135deg, #00548c, #00548ca4);
  box-shadow: 0px 5px 20px  #00548ca4;
}

.sector-card.center[data-sector="automotive"] {
  background: linear-gradient(135deg, #1ad1c9, #1ad1c886);
  box-shadow: 0px 5px 20px #1ad1c886;
}

.sector-card.center[data-sector="business-services"] {
  background: linear-gradient(135deg, #665cd9, #665cd99c);
  box-shadow: 0px 5px 20px #665cd99c;
}

.sector-card.center[data-sector="biotech"] {
  background: linear-gradient(135deg, #adf29c, #adf29c76);
  box-shadow: 0px 5px 20px #adf29c76;
}

.sector-card.center[data-sector="transportation"] {
   background: linear-gradient(135deg, #ff6a13, #ff6a13c4);
  box-shadow: 0px 5px 20px #ff6a13c4;
}

.sector-card.center[data-sector="food-industry"] {
   background: linear-gradient(135deg, #665cd9, #665cd99c);
  box-shadow: 0px 5px 20px #665cd99c;
}

.sector-card.center[data-sector="utilities"] {
  background: linear-gradient(135deg, #1ad1c9, #1ad1c886);
  box-shadow: 0px 5px 20px #1ad1c886;
}

.sector-card.center[data-sector="military"] {
 background: linear-gradient(135deg, #00548c, #00548ca4);
  box-shadow: 0px 5px 20px  #00548ca4;
}

.sector-card.flipped .card-front {
  transform: rotateY(-180deg);
}

/* Sector-specific colors */
.sector-card[data-sector="finance"] .card-front {
  background: linear-gradient(135deg, #adf29c, #adf29c76);
  border-color: #adf29c;
}

.sector-card[data-sector="healthcare"] .card-front {
  background: linear-gradient(135deg, #ff6a13, #ff6a13c4);
  border-color: #ff6a13c4;
}

.sector-card[data-sector="manufacturing"] .card-front {
  background: linear-gradient(135deg, #00548c, #00548ca4);
  border-color: #00548ca4;
}

.sector-card[data-sector="automotive"] .card-front {
  background: linear-gradient(135deg, #1ad1c9, #1ad1c8c3);
  border-color: #1ad1c886;
}

.sector-card[data-sector="business-services"] .card-front {
  background: linear-gradient(135deg, #665cd9, #665cd99c);
  border-color: #665cd99c;
}

.sector-card[data-sector="biotech"] .card-front {
  background: linear-gradient(135deg, #adf29c, #adf29cad);
  border-color: #adf29c;
}

.sector-card[data-sector="transportation"] .card-front {
 background: linear-gradient(135deg, #ff6a13, #ff6a13c4);
  border-color: #ff6a13c4;
}

.sector-card[data-sector="food-industry"] .card-front {
  background: linear-gradient(135deg, #665cd9, #665cd99c);
  border-color: #665cd99c;
}

.sector-card[data-sector="utilities"] .card-front {
   background: linear-gradient(135deg, #1ad1c9, #1ad1c8c3);
  border-color: #1ad1c886;
}

.sector-card[data-sector="military"] .card-front {
  background: linear-gradient(135deg, #00548c, #00548ca4);
  border-color: #00548ca4;
}

.sector-card.flipped .card-back {
  transform: rotateY(0deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  transition: transform 0.6s ease-in-out;
}

.card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  background: #f0f1f036; /* Let the card background show through */
  border: 1px solid #f0f1f0;
}

.card-back {
  transform: rotateY(180deg);
  background: #1ad1c9;
  position: relative;
  overflow: hidden;
}

/* Sector-specific colors for card-back */
.sector-card[data-sector="finance"] .card-back {
  background: linear-gradient(135deg, #adf29c, #adf29c76);
}

.sector-card[data-sector="healthcare"] .card-back {
  background: linear-gradient(135deg, #ff6a13, #ff6a13c4);
}

.sector-card[data-sector="manufacturing"] .card-back {
  background: linear-gradient(135deg, #00548c, #00548ca4);
}

.sector-card[data-sector="automotive"] .card-back {
  background: linear-gradient(135deg, #1ad1c9, #1ad1c8c3);
}

.sector-card[data-sector="business-services"] .card-back {
  background: linear-gradient(135deg, #665cd9, #665cd99c);
}

.sector-card[data-sector="biotech"] .card-back {
  background: linear-gradient(135deg, #adf29c, #adf29cad);
}

.sector-card[data-sector="transportation"] .card-back {
   background: linear-gradient(135deg, #ff6a13, #ff6a13c4);
}


.sector-card[data-sector="food-industry"] .card-back {
  background: linear-gradient(135deg, #665cd9, #665cd99c);
}

.sector-card[data-sector="utilities"] .card-back {
  background: linear-gradient(135deg, #1ad1c9, #1ad1c8c3);
}

.sector-card[data-sector="military"] .card-back {
  background: linear-gradient(135deg, #00548c, #00548ca4);
}

.card-back-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sector-icon-bg {
  width: 80%;
  height: 80%;
  object-fit: contain;
  opacity: 0.1;
}

.sector-data {
  position: relative;
  z-index: 2;
  padding: 20px;
  height: 100%;
  width: 100%;
  display: flex;
}

/* Posiciona os títulos dos cards no topo */
.sector-card .sector-title {
  position: absolute;
  top: 60px; /* Ajuste conforme necessário */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-weight: bold;
}

/* === CONFIGURAÇÃO LIMPA E UNIFICADA PARA KEY SECTORS === */

/* Garantir que o contêiner tenha position relative */
.sector-card {
  position: relative !important;
}

/* 1. Título no topo do card */
.sector-card .sector-name-data {
  position: absolute !important;
  top: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1rem !important;
  text-align: center !important;
  z-index: 10 !important;
  margin: 0 !important;
  color: inherit !important;
}

/* Container dos dados - espaçamento equilibrado */
.sector-card .sector-data {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
  padding-top: 50px !important; /* Espaço para o título */
  gap: 15px !important; /* Distância igual entre os 3 conjuntos */
}

/* Cada conjunto de dados (número + label) */
.sector-card .data-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
}

/* 2. Números - configurações específicas por tipo */
.sector-card .data-number-workdays {
  font-size: 2rem !important;
  font-weight: bold !important;
  font-family: 'Space Grotesk', sans-serif !important;
  margin: 0 !important;
  color: inherit !important;
}

.sector-card .data-number-clients {
  font-size: 1.7rem !important;
  font-weight: bold !important;
  font-family: 'Space Grotesk', sans-serif !important;
  margin: 0 !important;
  color: inherit !important;
}

/* Fallback para .data-number genérico */
.sector-card .data-number {
  font-size: 2rem !important;
  font-weight: bold !important;
  font-family: 'Space Grotesk', sans-serif !important;
  margin: 0 !important;
  color: inherit !important;
}

/* 3. Labels mantendo font-weight */
.sector-card .data-label {
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  text-align: center !important;
  margin: 0 !important;
  opacity: 0.9 !important;
  color: inherit !important;
}

.sector-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.sector-name {
  font-size: 0.7rem;
  font-weight: 400;
  color: #1a1c1c; /* Light text for minimized cards */
  margin: 0;
  text-align: center;
  text-transform: lowercase;
}

/* Center card specific styling */
.sector-card.center .sector-icon {
  width: 80px;
  height: 80px;
}

.sector-card.center .sector-name {
  font-size: 1.1rem;
}

/* Configurações removidas - usando configuração unificada */

/* 5. Cores específicas para cards coloridos */

/* Cards verdes, laranjas e azuis-claros - texto escuro */
.sector-card[data-sector="finance"] .sector-name,
.sector-card[data-sector="finance"] .sector-name-data,
.sector-card[data-sector="finance"] .data-number,
.sector-card[data-sector="finance"] .data-number-workdays,
.sector-card[data-sector="finance"] .data-number-clients,
.sector-card[data-sector="finance"] .data-label,
.sector-card[data-sector="healthcare"] .sector-name,
.sector-card[data-sector="healthcare"] .sector-name-data,
.sector-card[data-sector="healthcare"] .data-number,
.sector-card[data-sector="healthcare"] .data-number-workdays,
.sector-card[data-sector="healthcare"] .data-number-clients,
.sector-card[data-sector="healthcare"] .data-label,
.sector-card[data-sector="automotive"] .sector-name,
.sector-card[data-sector="automotive"] .sector-name-data,
.sector-card[data-sector="automotive"] .data-number,
.sector-card[data-sector="automotive"] .data-number-workdays,
.sector-card[data-sector="automotive"] .data-number-clients,
.sector-card[data-sector="automotive"] .data-label,
.sector-card[data-sector="biotech"] .sector-name,
.sector-card[data-sector="biotech"] .sector-name-data,
.sector-card[data-sector="biotech"] .data-number,
.sector-card[data-sector="biotech"] .data-number-workdays,
.sector-card[data-sector="biotech"] .data-number-clients,
.sector-card[data-sector="biotech"] .data-label,
.sector-card[data-sector="transportation"] .sector-name,
.sector-card[data-sector="transportation"] .sector-name-data,
.sector-card[data-sector="transportation"] .data-number,
.sector-card[data-sector="transportation"] .data-number-workdays,
.sector-card[data-sector="transportation"] .data-number-clients,
.sector-card[data-sector="transportation"] .data-label,
.sector-card[data-sector="utilities"] .sector-name,
.sector-card[data-sector="utilities"] .sector-name-data,
.sector-card[data-sector="utilities"] .data-number,
.sector-card[data-sector="utilities"] .data-number-workdays,
.sector-card[data-sector="utilities"] .data-number-clients,
.sector-card[data-sector="utilities"] .data-label {
  color: #1a1c1c !important;
}

/* Cards escuros - texto claro */
.sector-card[data-sector="manufacturing"] .sector-name,
.sector-card[data-sector="manufacturing"] .sector-name-data,
.sector-card[data-sector="manufacturing"] .data-number,
.sector-card[data-sector="manufacturing"] .data-number-workdays,
.sector-card[data-sector="manufacturing"] .data-number-clients,
.sector-card[data-sector="manufacturing"] .data-label,
.sector-card[data-sector="business-services"] .sector-name,
.sector-card[data-sector="business-services"] .sector-name-data,
.sector-card[data-sector="business-services"] .data-number,
.sector-card[data-sector="business-services"] .data-number-workdays,
.sector-card[data-sector="business-services"] .data-number-clients,
.sector-card[data-sector="business-services"] .data-label,
.sector-card[data-sector="food-industry"] .sector-name,
.sector-card[data-sector="food-industry"] .sector-name-data,
.sector-card[data-sector="food-industry"] .data-number,
.sector-card[data-sector="food-industry"] .data-number-workdays,
.sector-card[data-sector="food-industry"] .data-number-clients,
.sector-card[data-sector="food-industry"] .data-label,
.sector-card[data-sector="military"] .sector-name,
.sector-card[data-sector="military"] .sector-name-data,
.sector-card[data-sector="military"] .data-number,
.sector-card[data-sector="military"] .data-number-workdays,
.sector-card[data-sector="military"] .data-number-clients,
.sector-card[data-sector="military"] .data-label {
  color: #f0f1f0 !important;
}

/* Navigation Arrows */
.carousel-nav {
  background: #1a1c1c;
  border: 2px solid #f0f1f0;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.carousel-nav:hover {
  background: rgba(26, 209, 201, 0.2);
  border-color: var(--color-accent);
}

.carousel-nav img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.carousel-nav.prev img {
  transform: rotate(180deg);
}

/* Progress Bar */
.progress-container {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px; /* Match new carousel width */
  width: 100%;
  padding: 0 20px;
  z-index: 10; /* Ensure it stays above other elements */
  margin: auto;
}

.progress-bar {
  height: 4px;
  background: rgba(240, 241, 240, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-green) 25%,
    var(--color-orange) 50%,
    var(--color-blue) 75%,
    #665cd9 100%
  );
  border-radius: 2px;
  transition: width 0.6s ease-in-out;
  width: 10%;
}



/* Consolidated Responsive Design for KEY SECTORS */
@media (max-width: 1200px) {
  .key-sectors-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(2rem, 4vw, 4rem) 1rem;
  }

  .key-sectors-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2rem);
    width: 100%;
    max-width: 1200px;
    grid-template-columns: 1fr;
  }

  .key-sectors-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    width: 100%;
  }

  .key-sectors-header h2 {
    font-size: clamp(2.9rem, 5vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    text-align: center;
  }

  .key-sectors-subtitle {
    font-size: clamp(1rem, 3vw, 1rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 1rem;
    text-align: center;
  }

  .key-sectors-right {
    position: relative;
    width: 100%;
    max-width: clamp(280px, 60vw, 600px);
  }

  .carousel-container {
    position: relative;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1rem);
  }

  .carousel-wrapper {
    flex: 1;
    overflow: hidden;
    border-radius: 15px;
    max-width: clamp(280px, 50vw, 500px);
  }

  .carousel-nav {
    position: relative;
    width: clamp(35px, 8vw, 50px);
    height: clamp(35px, 8vw, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .carousel-nav img {
    width: clamp(14px, 4vw, 20px);
    height: clamp(14px, 4vw, 20px);
  }

  .carousel-nav.prev {
    margin-right: auto;
  }

  .carousel-nav.next {
    margin-left: auto;
  }

  .sector-card {
    min-width: clamp(70px, 15vw, 120px);
    height: clamp(70px, 15vw, 120px);
    width: clamp(70px, 15vw, 120px);
  }

  .sector-card.center {
    min-width: clamp(105px, 25vw, 200px);
    height: clamp(150px, 35vw, 280px);
    width: clamp(105px, 25vw, 200px);
  }

  .sector-icon {
    width: clamp(30px, 8vw, 60px);
    height: clamp(30px, 8vw, 60px);
  }

  .sector-card.center .sector-icon {
    width: clamp(50px, 12vw, 80px);
    height: clamp(50px, 12vw, 80px);
  }

  .sector-name {
    font-size: clamp(0.7rem, 2vw, 0.9rem);
  }

  .sector-buttons {
    display: flex;
    flex-direction: grid;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .sector-btn {
    padding: clamp(6px, 2vw, 10px) clamp(10px, 3vw, 15px);
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    border-radius: 30px;
  }

  .carousel-track {
    gap: clamp(10px, 4vw, 30px);
    padding: clamp(40px, 12vw, 80px) 0;
    transform: translateX(clamp(80px, 20vw, 160px));
  }

  .progress-container {
    max-width: clamp(280px, 50vw, 500px);
    padding: 0 clamp(10px, 3vw, 20px);
  }
}

/* Enhanced Key Sectors Responsive - Tablet Range (480px-768px) */
@media (min-width: 480px) and (max-width: 768px) {
  .key-sectors-section {
    padding: clamp(3rem, 6vw, 4rem) clamp(1rem, 2vw, 2rem) clamp(4rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
  }
  
  .key-sectors-container {
    max-width: clamp(600px, 85vw, 750px); /* Container expandido alinhado com section padding */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    gap: clamp(50px, 8vw, 80px);
  }
  
  .key-sectors-right {
    max-width: clamp(550px, 80vw, 700px); /* Carousel area expandida */
    display: flex;
    justify-content: center; /* Centraliza o carousel no container */
  }
  
  .carousel-wrapper {
    max-width: clamp(500px, 75vw, 650px); /* Wrapper alinhado com container */
    overflow: hidden; /* Controla o overflow para mostrar previews equilibrados */
    position: relative; /* Para o posicionamento do track */
    display: flex;
    justify-content: flex-start; /* Controle preciso do posicionamento */
  }
  
  .carousel-track {
    gap: clamp(20px, 4vw, 30px);
    padding: clamp(50px, 10vw, 70px) 0;
    /* Centralização será controlada dinamicamente pelo JavaScript */
    /* transform: translateX(clamp(120px, 20vw, 160px)); - REMOVIDO */
    width: max-content; /* Permite que o track tenha a largura necessária */
    display: flex;
    align-items: flex-end;
  }
  
  .sector-card {
    min-width: clamp(80px, 15vw, 100px);
    height: clamp(80px, 15vw, 100px);
    width: clamp(80px, 15vw, 100px);
  }
  
  .sector-card.center {
    min-width: clamp(140px, 25vw, 180px);
    height: clamp(200px, 35vw, 250px);
    width: clamp(140px, 25vw, 180px);
  }
  
  .sector-icon {
    width: clamp(35px, 7vw, 50px);
    height: clamp(35px, 7vw, 50px);
  }
  
  .sector-card.center .sector-icon {
    width: clamp(60px, 12vw, 75px);
    height: clamp(60px, 12vw, 75px);
  }
  
  .sector-name {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
  }
  
  .sector-card.center .sector-name {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }
  
  .progress-container {
    max-width: clamp(500px, 75vw, 650px); /* Alinhado com carousel wrapper */
  }
  
  .carousel-nav {
    width: clamp(40px, 8vw, 50px);
    height: clamp(40px, 8vw, 50px);
  }
  
  .carousel-nav img {
    width: clamp(16px, 3vw, 20px);
    height: clamp(16px, 3vw, 20px);
  }
}

/* Fix header position in responsive mode */
@media (max-width: 768px) {
  header {
    position: fixed; /* Garante que o menu fique fixo no modo responsivo */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  .mobile-menu {
    position: fixed; /* Torna o menu mobile fixo no topo */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  /* Key Sectors Carousel Container Mobile Responsive */
  .carousel-container {
    margin: 0 auto; /* Centraliza o container */
    padding: 0 5px; /* Padding ainda menor para container mais largo */
    max-width: calc(100vw - 10px); /* Muito mais próximo dos limites da tela */
    width: 100%; /* Usa largura disponível respeitando o max-width */
    overflow: hidden; /* Garante que o scroll funcione corretamente */
    box-sizing: border-box; /* Inclui padding no cálculo da largura */
  }

  .carousel-wrapper {
    max-width: 100%; /* Respeita o container pai */
    width: 100%; /* Usa toda a largura disponível */
    overflow: hidden; /* Controla overflow interno */
    position: relative; /* Para o posicionamento do track */
  }

  .carousel-track {
    padding: 30px 0; /* Padding reduzido para melhor aproveitamento */
    transform: translateX(0); /* Reset do transform para carrossel padrão */
    gap: 20px; /* Gap aumentado entre cards */
    justify-content: flex-start; /* Alinhamento padrão de carrossel */
    width: 100vw; /* Usa a largura da viewport */
    min-width: 100vw; /* Usa a largura da viewport ao invés de valor fixo */
  }

  /* DESABILITA COMPLETAMENTE O EFEITO FLIP NO MOBILE */
  .sector-card {
    perspective: none !important; /* Remove perspectiva 3D */
    pointer-events: auto !important;
    
    /* Todos os cards têm o mesmo tamanho no mobile - aumentados para melhor aproveitamento */
    min-width: clamp(140px, 35vw, 180px) !important;
    width: clamp(140px, 35vw, 180px) !important;
    height: clamp(200px, 50vw, 250px) !important;
    
    /* Remove diferenciação de centro - todos iguais */
    transform: none !important;
    scale: 1 !important;
    z-index: 1 !important;
    box-shadow: 0px 2px 10px rgba(26, 209, 201, 0.2) !important;
  }

  /* Remove completamente a classe center no mobile */
  .sector-card.center {
    min-width: clamp(140px, 35vw, 180px) !important;
    width: clamp(140px, 35vw, 180px) !important;
    height: clamp(200px, 50vw, 250px) !important;
    transform: none !important;
    scale: 1 !important;
    z-index: 1 !important;
    box-shadow: 0px 2px 10px rgba(26, 209, 201, 0.2) !important;
  }

  /* FORÇA VISIBILIDADE DOS DADOS SEM FLIP */
  .sector-card .card-front {
    display: none !important; /* Esconde a frente do card */
  }

  .sector-card .card-back {
    display: block !important; /* Sempre mostra o verso (dados) */
    position: relative !important;
    transform: none !important; /* Remove qualquer transformação 3D */
    backface-visibility: visible !important;
  }

  /* Ajusta layout dos dados para visibilidade constante */
  .sector-card .sector-data {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    padding: 15px 10px !important;
    gap: 10px !important;
    text-align: center !important;
  }

  /* Título do setor */
  .sector-card .sector-name-data {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    font-size: clamp(1rem, 2.5vw, 1rem) !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    text-transform: lowercase !important;
  }

  /* Números dos dados */
  .sector-card .data-number-workdays {
    font-size: clamp(1.6rem, 4vw, 1.8rem) !important;
    font-weight: 700 !important;
  }

  .sector-card .data-number-clients {
    font-size: clamp(1.4rem, 3.5vw, 1.5rem) !important;
    font-weight: 700 !important;
  }

  .sector-card .data-number {
    font-size: clamp(1.6rem, 4vw, 1.8rem) !important;
    font-weight: 700 !important;
  }

  /* Labels dos dados */
  .sector-card .data-label {
    font-size: clamp(0.9rem, 2vw, 0.8rem) !important;
    font-weight:  400 !important;
    opacity: 0.9 !important;
  }

  /* Data items */
  .sector-card .data-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }

  /* Background dos cards - mantém imagens como no desktop */
  .sector-card .card-back-bg {
    position: absolute !important;
    top: 25% !important;
    left: 25% !important;
    width: 50% !important;
    height: auto !important;
    z-index: -1 !important;
    opacity: 1 !important; /* Aumentada para melhor visibilidade */
  }

  .sector-card .sector-icon-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Mudado de cover para contain */
    opacity: 1 !important; /* Aumentada para melhor visibilidade */
  }

  /* Tamanhos específicos para ícones problemáticos */
  .sector-card[data-sector="transportation"] .card-back-bg,
  .sector-card[data-sector="utilities"] .card-back-bg,
  .sector-card[data-sector="military"] .card-back-bg {
    width: 40% !important; /* Menor que os outros */
    height: auto !important;
    top: 30% !important;
    left: 30% !important;
  }

  .sector-card[data-sector="transportation"] .sector-icon-bg,
  .sector-card[data-sector="utilities"] .sector-icon-bg,
  .sector-card[data-sector="military"] .sector-icon-bg {
    width: 80% !important;
    height: 80% !important;
    object-fit: contain !important;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    opacity: 0.8 !important;
    opacity: 0.8 !important;
  }

  /* Mantém cores de fundo por setor como no desktop */
  .sector-card[data-sector="finance"] {
    background: linear-gradient(135deg, #adf29c, #adf29c76) !important;
  }

  .sector-card[data-sector="healthcare"] {
    background: linear-gradient(135deg, #ff6a13, #ff6a13c4) !important;
  }

 .sector-card[data-sector="manufacturing"] {
    background: linear-gradient(135deg, #00548c, #00548ca4) !important;
  }

  .sector-card[data-sector="automotive"] {
    background: linear-gradient(135deg, #1ad1c9, #1ad1c886) !important;
  }

  .sector-card[data-sector="business-services"] {
    background: linear-gradient(135deg, #665cd9, #665cd99c) !important;
  }

  .sector-card[data-sector="biotech"] {
    background: linear-gradient(135deg, #adf29c, #adf29c76) !important;
  }

  .sector-card[data-sector="transportation"] {
    background: linear-gradient(135deg, #1ad1c9, #1ad1c886) !important;
  }

  .sector-card[data-sector="food-industry"] {
    background: linear-gradient(135deg, #ff6a13, #ff6a13c4) !important;
  }

  .sector-card[data-sector="utilities"] {
    background: linear-gradient(135deg, #665cd9, #665cd99c) !important;
  }

  .sector-card[data-sector="military"] {
    background: linear-gradient(135deg, #00548c, #00548ca4) !important;
  }
}

/* APPS GALLERY SECTION */
.apps-gallery-section {
  padding: 4rem 2rem;
  background: var(--color-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  position: relative;
}

.apps-gallery-container {
  max-width: 1000px;
  width: 100%;
  aspect-ratio: 16 / 9; /* Fixed 16:9 aspect ratio */
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.gallery-slide {
  transition: transform 0.3s ease;
}

.gallery-slide:hover {
  transform: scale(1.02);
}

.gallery-slide {
  cursor: pointer !important;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: pointer !important;
}

/* Override custom drag cursor for gallery slides - Force pointer cursor */
.gallery-slides-container .gallery-slide,
.gallery-slides-container .gallery-slide *,
.gallery-slides-container.custom-drag-cursor,
.gallery-slides-container.custom-drag-cursor .gallery-slide,
.gallery-slides-container.custom-drag-cursor .gallery-slide *,
.gallery-slides-container.custom-drag-cursor .gallery-slide img,
#slide1,
#slide2,
a#slide1,
a#slide2,
a[id^="slide"] {
  cursor: pointer !important;
}

/* Ensure links in gallery always show pointer */
.apps-gallery-section a,
.apps-gallery-section a *,
.gallery-slide a,
.gallery-slide a * {
  cursor: pointer !important;
}

/* FORCE DEFAULT CURSOR ON MAIN PAGE CAROUSELS - No custom cursor on index.html */
.key-sectors-section,
.key-sectors-section *,
.key-sectors-section .carousel-track,
.key-sectors-section .carousel-track *,
.key-sectors-section .sector-card,
.key-sectors-section .sector-card *,
.apps-gallery-section .gallery-slides-container,
.apps-gallery-section .gallery-slides-container *:not(a):not(a *) {
  cursor: default !important;
}

/* Keep pointer cursor only on navigation buttons in main page */
.key-sectors-section .carousel-nav,
.key-sectors-section .carousel-nav *,
.key-sectors-section .sector-btn,
.key-sectors-section .sector-btn *,
.key-sectors-section .progress-container,
.key-sectors-section .progress-container * {
  cursor: pointer !important;
}

.gallery-slides-container {
  position: relative;
  width: 200%; /* Para 2 imagens lado a lado */
  height: 100%;
  display: flex;
  transition: transform 1s ease-in-out;
}

.gallery-slide {
  width: 50%; /* Cada slide ocupa metade do container */
  height: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Slide indicators */
.gallery-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 10px;
}

.gallery-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.gallery-indicator.active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .apps-gallery-section {
    padding: 2rem 1rem;
    min-height: 40vh;
  }

  .apps-gallery-container {
    max-width: 100%;
    aspect-ratio: 16 / 9; /* Fixed 16:9 aspect ratio */
    border-radius: 15px;
  }

  .gallery-slides-container {
    width: 200%;
    height: 100%;
  }

  .gallery-slide {
    width: 50% !important;
    height: 100%;
  }
  
  .gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Fix para telas muito pequenas - força comportamento correto */
  @media (max-width: 320px) {
    .apps-gallery-section {
      padding: 1rem 0.5rem !important;
      min-height: 25vh !important;
    }
    
    .apps-gallery-container {
      width: calc(100vw - 1rem) !important; /* Largura total menos padding */
      max-width: 310px !important;
      aspect-ratio: 4 / 3 !important;
      border-radius: 10px !important;
      margin: 0 auto !important;
      overflow: hidden !important;
      position: relative !important;
    }
    
    .gallery-slides-container {
      width: 200% !important; /* Exatamente o dobro do container */
      height: 100% !important;
      display: flex !important;
      position: relative !important;
      left: 0 !important;
      transition: transform 1s ease-in-out !important;
    }
    
    .gallery-slide {
      width: 50% !important; /* Metade do slides-container */
      min-width: 50% !important;
      max-width: 50% !important;
      height: 100% !important;
      flex-shrink: 0 !important;
      display: block !important;
    }
    
    .gallery-slide img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
    }
    
    /* Indicadores */
    .gallery-indicators {
      margin-top: 10px !important;
    }
    
    .gallery-indicator {
      width: 8px !important;
      height: 8px !important;
    }
  }

  .gallery-indicators {
    margin-top: 10px;
  }

  .gallery-indicator {
    width: 10px;
    height: 10px;
  }
}