/* responsive-mobile.css */
@media (max-width: 768px) {
  /* 0) Reset básico e overflow */
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
  }

  /* 1) Containers “na régua” de 16px */
  .container-1320,
  .container-1220,
  .container-1080 {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important; /* 16px de cada lado */
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* 2) Header/Tarja */
  header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.9) !important;
    z-index: 1000 !important;
    height: 120px !important; /* dobra a altura */
  }
  header .container-1080.header-content {
    box-sizing: border-box !important;
    height: 120px !important;  /* igual ao header */
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .logo {
    margin: 0;
  }
  .logo-link {
    padding: 8px; /* aumenta a área de clique sem afetar o visual */
  }

  .menu-toggle {
    display: flex !important;
    margin: 0;
    z-index: 1001 !important;
  }
  header nav {
    display: none !important;
  }


 /* 3) Banner full‑width e sem “empurrão” lateral */
section.banner-carousel {
  margin: 0 !important;          /* remove o calc(-50vw+50%) */
  width: 100vw !important;       /* ocupa toda a largura da viewport */
  left: 0 !important;            /* garante que comece no 0 */
  padding: 0 !important;         /* zera qualquer padding extra */
  height: 50vh !important;       /* mantém a altura em 50vh */
  overflow: visible !important;
  position: relative !important;
}

/* zera o padding interno que “cortava” as laterais */
.banner-inner {
  padding: 0 !important;
  overflow: visible !important;
}

/* faz o slide cobrir toda a área do section */
.banner-slide,
.banner-slide img,
.banner-slide video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 50vh !important;
  object-fit: cover !important;
}

  /* 5) Outras seções “na régua” */
  section, .case-wrapper, .step-wrapper, .contact-container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 16px !important;
    margin: 0 auto !important;
  }
  /* map-block */
  section.map-block .map-overlay-wrapper,
  section.map-block .map-image-wrapper {
    display: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 24px !important;
  }
  .map-text-flex {
    flex-direction: column !important;
    text-align: center !important;
    padding-top: 24px !important;
    padding-bottom: 48px !important;
  }
  .form-base {
    margin: 16px auto !important;
    padding: 16px !important;
    width: calc(100% - 32px) !important;
    display: none !important;
  }
  .map-form {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .map-form input,
  .map-form button {
    width: 100% !important;
  }
  /* client carousel */
  .client-carousel,
  .client-carousel-track {
    
    padding: 0px !important;
    overflow-x: auto !important;
    animation: scroll-carousel 40s linear infinite !important;
    scroll-snap-type: x mandatory !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    width: max-content; /* 👈 isso garante que ela tenha o tamanho real da soma dos cards */
  }
  .client-card {
    flex: 0 0 auto !important;
    scroll-snap-align: center !important;
    margin-right: 10px !important;
  }
  /* case section */
  .case-wrapper {
    flex-direction: column !important;
    text-align: center !important;
    margin-bottom: 24px !important;
  }
  .case-image {
    margin-bottom: 16px !important;
  }
  .case-button {
    display: none !important;
  }
  /* step section */
  .step-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .step-wrapper::before,
  .circle-line {
    display: none !important;
  }
  .step {
    width: 100% !important;
    margin-bottom: 32px !important;
  }
  /* contact section */
  .contact-divider {
    display: none !important;
  }
  .contact-form input,
  .contact-form button {
    width: 100% !important;
  }
  /* footer */
  footer.site-footer {
    padding: 16px !important;
  }
  footer.site-footer .footer-nav {
    display: none !important;
  }

/* 4) FORÇA AS SETAS NO FINAL DO ARQUIVO */
.banner-carousel .carousel-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(0,0,0,0.0);
  color: #fff;
  font-size: 24px !important;
  line-height: 36px !important;
  text-align: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.banner-carousel .carousel-nav.prev { left: calc((100vw - 768px) / 2) !important; }
.banner-carousel .carousel-nav.next { right: 16px !important; }

  /* ———————————————————————————— 
     0) anula o calc do desktop que empurra o banner
     ———————————————————————————— */
  section.banner-carousel {
    margin: 0 !important;
    width: 100vw !important;
    left: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }

  .banner-inner {
    overflow: visible !important;
  }

  /* ———————————————————————————— 
     1) Style base das setas
     ———————————————————————————— */
  section.banner-carousel .carousel-nav {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 80px !important;
    line-height: 36px !important;
    background: rgba(0,0,0,0.0) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ———————————————————————————— 
     2) Reposiciona cada seta com mesma especificidade 
     ———————————————————————————— */
  section.banner-carousel .carousel-nav.prev {
    left: 16px !important;
    right: auto !important;
  }
  section.banner-carousel .carousel-nav.next {
    right: 16px !important;
    left: auto !important;
  }
}


@media (max-width: 768px) {
  /* 1) Garante que o container ocupe 100% e não se mova */
  .client-carousel {
    width: 100% !important;
    overflow: hidden !important;
    animation: none !important;        /* anula qualquer animação aplicada ao container */
    margin: 24px 0 !important;         /* respiraçoes em cima e embaixo */
    padding: 0 !important;
  }

  /* 2) Aplica a animação só à track */
  .client-carousel-track {
    width: max-content !important;     /* mantém o tamanho total dos cards */
    animation: scroll-carousel 40s linear infinite !important;
    /* você pode ajustar a velocidade alterando os "40s" para outro valor */
  }
}
@media (max-width: 768px) {
  /* anula o padding 16px que o rule “section, …” está aplicando neste bloco */
  .client-carousel-bg {
    padding: 0 !important;
  }

  /* garante que o container do carousel fique full‑width, sem deslocar pro centro */
  .client-carousel {
    margin: 24px 0 !important;  /* seu “respiro” em cima e embaixo */
    padding: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* 7) Case image full‑width + square */ 
  .case-image img {
    width: 100vw !important;                   /* ocupa 100% da viewport */
    max-width: none !important;
    
    margin-left: calc( (100% - 100vw) / 2 ) !important; /* centraliza cancelando o padding */
    aspect-ratio: 1 / 1 !important;             /* mantém quadrado */
    object-fit: cover !important;
    display: block !important;
    
    height: auto !important;                    /* respeita o aspect-ratio */
  }

  /* 8) “Quebrar” o container e fazer a imagem do case ir até as bordas */
   .case-section .container-1080 {
    padding: 0 !important;
    margin: 0 !important;
  }
 
}

@media (max-width: 768px) {

  /* 9) Case section – texto centralizado e justificado */
  .case-section .case-text {
    text-align: center !important;
    padding: 0 16px !important;
  }

  .case-section .case-text h2 {
   /* fonte menor, centralizada e com espaçamento */
    font-size: 1.6rem !important;
    text-align: center !important;
    margin: 16px 0 !important;
    line-height: 1.2 !important;
  }

  .case-section .case-text p {
    /* parágrafo justificado, legível e com respiração */
    font-size: 1rem !important;
    text-align: justify !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* ————————————————————————————————
     10) Ajuste do container e .case-text em mobile
  ———————————————————————————————— */
  .case-section .case-wrapper {
    /* empilha verticalmente e remove qualquer padding/margin do container */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .case-section .case-text {
    /* ocupa toda a largura disponível */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* reintroduz um respiro interno de 16px */
    padding: 0 32px !important;
    margin-bottom: 6px !important;
  }

}

@media (max-width: 768px) {
  /* 0) Zera o gap entre case- e step-sections */
  .case-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .step-section {
    /* Tira o positioning/transform antigo */
    position: static !important;
    width: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Espaço menor embaixo do último bloco */
    padding-bottom: 16px !important;
  }

  /* 1) Padding de 24px dentro do container para o texto */
  .step-section > .container-1320 {
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  /* 2) Distância acima e abaixo do título */
  .step-headline {
    text-align: center !important;
    font-size: 1.6rem !important;
    margin: 12px !important;
    line-height: 1.2 !important;
    padding-bottom: 32px !important;
  }

  /* 3) Espaçamento entre cada passo */
  .step {
    margin-bottom: 12px !important; /* antes era 32px */
  }

  /* 4) Título e texto de cada passo */
  .step-title {
    text-align: center !important;
    font-size: 1.15rem !important;
    margin: 8px 0 12px !important;
    line-height: 1.3 !important;
  }
  .step-text {
    text-align: justify !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 0 0 16px !important;  /* gap inferior de 16px */
  }
}

@media (max-width: 768px) {
  /* distância entre passo a passo e contato */
  .case-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .step-section {
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
  }

  /* 1) Container “na régua” de 16px */
  .contact-section > .container-1080 {
    padding: 0px !important;
    box-sizing: border-box !important;
  }

  /* 2) Espaço acima da sessão de contato */
  .contact-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 32px !important; /* padding padrão embaixo */
  }

  /* 3) Título como os outros */
  .contact-section .contact-text h2 {
    font-size: 1.6rem !important;
    text-align: center !important;
    margin: 32px 0 !important;
    line-height: 1.2 !important;
  }

  /* 4) Parágrafo igual às demais seções */
  .contact-section .contact-text p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    text-align: justify !important;
    margin-bottom: 10px !important;
  }

  /* 5) Inputs e botão ocupam 100% da largura disponível */
  .contact-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .contact-form input,
  .contact-form button {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* 0) Garanto que o container empilhe e estique os filhos */
  .contact-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* 1) Formulário ocupa 100% do espaço do container */
  .contact-form {
    width: 100% !important;
  }

  /* 2) Inputs e botão — esticam até a borda do form */
  .contact-form input,
  .contact-form button {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  /* 1) Remover gap extra após o passo a passo */
  .step-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 2) Aproximar o cinza do topo, ajustando margin/padding */
  .contact-section {
    margin-top: 0 !important;      /* sem margem externa */
    padding-top: 16px !important;  /* mais perto do verde */
    padding-bottom: 50px !important; /* padding padrão embaixo */
  }

  /* 3) Reduzir gap interno entre texto e formulário */
  .contact-container {
    gap: 16px !important;          /* menos “buraco” entre .contact-text e form */
  }

  /* 4) Garantir que o form ocupe 100% do container */
  .contact-form {
    width: 100% !important;
  }
  .contact-form input,
  .contact-form button {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  /* esconder o desktop e exibir o mobile */
  .footer-desktop {
    display: none !important;
  }

  .footer-mobile {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: calc(100% - 64px) !important; /* 16px de cada lado */
    margin: 16px auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    background: #111; /* se quiser manter o fundo preto só no mobile */
  }

  .footer-mobile .mobile-phone {
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
    /* já estará alinhado à esquerda em 16px */
  }

  .footer-mobile .back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* opcional: aumentar o clique na área da seta */
  .footer-mobile .back-to-top svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 768px) {

  /* garanta que seus spans já tenham transição suave */
.menu-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background: #fff;
  margin: 4px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* quando .open, gira a 1ª e 3ª spans, e some a do meio */
.menu-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


  header nav.active {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;   /* centra verticalmente */
    align-items: center !important;       /* centra horizontalmente */
    position: fixed !important;           /* fixa em relação à viewport */
    top: 120px !important;                /* iniciando abaixo do header */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;                 /* ocupa até o fim da tela */
    background: rgba(0, 0, 0, 0.85) !important; /* leve transparência */
    padding: 32px 16px !important;        /* respiro interno */
    box-sizing: border-box !important;
    z-index: 1002 !important;             /* garante estar acima de tudo */
    overflow-y: auto !important;          /* rolagem se ultrapassar a altura */
  }

  header nav.active ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 24px !important;                 /* espaçamento maior entre links */
    margin-bottom: 32px !important;       /* espaço extra após o último item */
    padding: 0 !important;
    list-style: none !important;
  }

  header nav.active ul li a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;        /* alinha o texto no centro */
    padding: 12px 0 !important;           /* aumenta a área clicável */
    font-size: 1.25rem !important;        /* deixa o texto maior */
    color: #fff !important;               /* garante cor branca */
    border-bottom: none !important;       /* remove linhas inferiores */
  }
}

@media (max-width: 768px) {
/* ─── ISOLA OS ÍCONES DO MENU ─── */
.menu-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 1002; /* acima de tudo */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* todos os ícones ficam empilhados e centralizados */
.menu-toggle .icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}

/* ícone de fechar começa invisível */
.menu-toggle .icon-close {
  opacity: 0;
}

/* quando abrir, esconde o hambúrguer e mostra o X */
.menu-toggle.open .icon-hamburger {
  opacity: 0;
}
.menu-toggle.open .icon-close {
  opacity: 1;
}

}



@media (max-width: 768px) {
  .empresa-map-text {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    padding-top: 24px !important;
    padding-bottom: 48px !important;
  }

  .empresa-map-text .col-left,
  .empresa-map-text .col-right {
    width: 100% !important;
  }

  .empresa-map-text .col-left h2 {
    font-size: 2.5rem !important; /* CORRIGIDO */
    font-weight: 700 !important;
    margin: 16px 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .empresa-map-text .col-right p {
    font-size: 1.125rem !important; /* CORRIGIDO */
    font-weight: 400 !important;
    text-align: justify !important;
    line-height: 1.6 !important;
    margin: 0 auto 24px auto !important;
    max-width: 680px !important;
  }
}


@media (max-width: 768px) {
  .empresa-map-text {
    padding-top: 16px !important; /* reduz o espaço verde acima */
  }
  
  .empresa-map-text .col-left h2 {
    margin-top: 0 !important; /* zera margem extra do título */
  }
}
@media (max-width: 768px) {
  .empresa-map-text {
    padding-top: 0 !important; /* Zera respiro extra */
  }

  .empresa-map-text .col-left h2 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 16px 0 !important; /* margem embaixo do título */
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .empresa-map-text .col-right p {
    font-size: 1rem !important; /* Ajustado */
    font-weight: 400 !important;
    line-height: 1.8 !important; /* Ajustado */
    text-align: justify !important;
    margin: 0 auto 0 auto !important;
    max-width: 680px !important;
  }
}
@media (max-width: 768px) {
  .empresa-map-text {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  .empresa-map-text .col-left {
    margin-top: 0 !important;
  }
}
@media (max-width: 768px) {
  .empresa-map-text {
    padding-top: 24px !important; /* igual ao map-text-flex do Index */
    padding-bottom: 48px !important;
    margin-top: 0 !important;
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .empresa-map-text .col-left,
  .empresa-map-text .col-right {
    width: 100% !important;
  }

  .empresa-map-text .col-left h2 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 16px 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .empresa-map-text .col-right p {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    text-align: justify !important;
    margin: 0 auto 24px auto !important;
    max-width: 680px !important;
  }
}
@media (max-width: 768px) {
  section.banner-carousel.empresa-banner {
    height: 50vh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .empresa-banner .banner-inner {
    height: 50vh !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  .empresa-banner .banner-slide img,
  .empresa-banner .banner-slide video {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0;
    left: 0;
  }
}
@media (max-width: 768px) {
  .empresa-banner {
    margin-bottom: -3vh !important; /* puxa o banner pra cima */
  }

  .empresa-map-text {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}