/* Combined stylesheet generated from:
   - css/header.css
   - css/banner.css
   - css/solucoes.css
   - css/sobre.css
   - css/clientes.css
   - css/contato.css

   NOTE: Relative asset paths adjusted for a stylesheet placed at the site root (same folder as index.html).
*/

/* --- header.css --- */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fbfbfb;
}
/* Font setup: prefer locally installed 'Articulat CF', fall back to bundled files if present */
@font-face {
  font-family: 'Articulat CF';
  src: local('Articulat CF'),
       url('assets/fonts/ArticulatCF-Regular.woff2') format('woff2'),
       url('assets/fonts/ArticulatCF-Regular.woff') format('woff'),
       url('assets/fonts/ArticulatCF-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Articulat CF';
  src: local('Articulat CF Bold'),
       url('assets/fonts/ArticulatCF-Bold.woff2') format('woff2'),
       url('assets/fonts/ArticulatCF-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply the font project-wide */
html, body {
  font-family: 'Articulat CF', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#header {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-header {
  width: 1120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-hamburguer {
  display: none;
}

.nav-menu {
  display: flex;
  gap: 8px;
}

.nav-menu li {
  all: unset;
  list-style: none;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-menu li a{
  all: unset;
  list-style: none;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  cursor: pointer;
  color: #777;
}

.nav-menu li button {
  all: unset;
  border: 1px solid #555;
  padding: 8px 24px;
  border-radius: 40px;
  cursor: pointer;
  font-size: 14px;
  color: #072C72;
}

/* Modal Entrar: escondido por padrão e visível quando recebe .ativo */
.modal-entrar,
#modalEntrar {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 8px 12px;
  z-index: 1200;
  min-width: 180px;
}

.modal-entrar.ativo,
#modalEntrar.ativo {
  display: flex;
  
}

/* Posicionamento pai como relative para que o absolute funcione */
.container-header {
  position: relative;
}

@media (max-width: 768px) {
  .menu-hamburguer {
    display: block;
  }

  /* Esconde o menu por padrão no mobile */
  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    background: #fff;
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    padding: 12px 16px;
    z-index: 1100;
  }

  /* Quando a classe .ativo é adicionada (pelo JS), mostra o menu em coluna */
  .nav-menu.ativo {
    display: flex;
  }

  .nav-menu li {
    width: 100%;
    margin: 6px 0;
  }

  .nav-menu li a,
  .nav-menu li button {
    display: block;
    width: 100%;
    padding: 12px 10px;
  }

  /* Ajuste visual do botão hamburguer quando aberto */
  #menu-toggle.aberto {
    transform: rotate(90deg);
  }
}

/* --- banner.css --- */
/* Banner (hero) images: full width, fixed height and cover */
.banner {
    width: 100%;
    overflow: hidden;
}

/* Ensure slide content is centered so images that don't fill the full width remain centered */
.banner .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Images: fill available width, keep aspect ratio and never be cropped.
     max-height caps at 680px (adjustable). Use height:auto to preserve proportion. */
.banner .swiper-slide img {
    width: 100%;
    max-width: 1280px;
    height: auto;
    display: block;
}

.banner .swiper-button-prev,
.banner .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
}

.banner .swiper-button-prev {
  left: calc(50% - 640px + 40px);
}

.banner .swiper-button-next {
  right: calc(50% - 640px + 40px);
}

/* Esconde a seta padrão azul que o Swiper insere via ::after */
.banner .swiper-button-next::after,
.banner .swiper-button-prev::after {
    display: none;
}

/* Estiliza o botão circular com a imagem interna */
.banner .swiper-button-next,
.banner .swiper-button-prev {
    background: rgba(255,255,255,0.9);
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.banner .swiper-button-next img,
.banner .swiper-button-prev img {
    width: 40px;
    height: 40px;
}

/* --- solucoes.css --- */
.solucoes {
    width: 100%;
    max-width: 1180px;
    margin: 40px auto 0 auto;
}

.titulo-section {
    color: #555;
    font-size: 64px;
    font-weight: 600;
    text-align: center;
}

.subtitulo {
    color: #555;
    font-size: 32px;
    font-weight: 600;

}

.container-solucoes-30,
.container-solucoes-25 {
    display: flex;
    gap: 16px;
}

.card-solucoes {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #777;
    height: 64px;
    gap: 4px;
    font-size: 14px;
    color: #777;
    border-radius: 8px;
    box-sizing: border-box;
}

.card-solucoes img {
    width: 32px;
    height: 32px;
}

.container-produtos {
    margin-top: 40px;
    width: 100%;
    max-width: 1180px;
    display: flex;
    gap: 16px;
}

.card-produtos {
    width: 100%; /* let Swiper control slide width; card fills slide */
    max-width: 300px; /* visual cap when not constrained */
    height: 264px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-produtos img {
    width: 204px;
    height: auto;
    margin-bottom: 16px;
}

.card-produtos p {
    font-size: 16px;
    color: #555;
    font-weight: 400;
}

/* Hide navigation arrows for the produtos carousel */
.swiper-produtos .swiper-button-next,
.swiper-produtos .swiper-button-prev {
    display: none !important;
}

.button-consultor {
    all: unset;
    padding: 12px 16px;
    background: linear-gradient(to top, #393939, #949494);
    color: #fff;
    border-radius: 24px;
    font-size: 14px;
    margin: 40px auto 0 auto;
    cursor: pointer;
}

.button-consultor a {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- sobre.css --- */

.container-img-black {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
}

.texto-sobre {
    background: linear-gradient(to right, #000000, #555);
    padding: 100px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.container-objetivos {
    width: 100%;
    max-width: 1180px;
    margin: 40px auto;
    display: flex;
    gap: 80px;
    justify-content: center;
}

.card-objetivo {
    width: 280px;
    height: 242px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 16px;
    margin-top: 40px !important;
}

.card-objetivo p {
    margin: 0;
    padding: 0;
    color: #555;
}

/* --- Responsive rules (mobile-first) --- */

/* Make header and main containers fluid */
.container-header,
.container-solucoes-30,
.container-solucoes-25,
.container-produtos,
.container-contato,
.container-img-black,
.container-objetivos,
.footer-container-1080 {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.logo {
  max-width: 180px;
  height: auto;
}

/* Make images responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Header improvements */
.container-header { align-items: center; }

/* Hide banner navigation arrows on small screens (mobile) */
@media (max-width: 768px) {
  .banner .swiper-button-next,
  .banner .swiper-button-prev {
    display: none !important;
    opacity: 0;
    pointer-events: none;
  }
  /* Center the Produtos title on mobile */
  .subtitulo {
    text-align: center;
  }
}
.menu-hamburguer {
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  display: none; /* enabled by breakpoints below */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-hamburguer span { display:block; width:22px; height:2px; background:#072C72; margin:3px 0; transition: transform .2s ease; }

/* overlay used to dim background and capture clicks */
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1050;
  opacity: 0;
  transition: opacity .2s ease;
}
.menu-overlay.ativo { display:block; opacity: 1; }

/* Nav menu: desktop inline, mobile slide-down */
.nav-menu {
  transition: transform .25s ease, opacity .25s ease;
}
.nav-menu.ativo {
  transform: translateY(0);
  opacity: 1;
}

/* banner arrow positioning responsive tweak: keep arrows inside the main content area */
.banner .swiper-button-prev { left: clamp(12px, 4vw, 48px); }
.banner .swiper-button-next { right: clamp(12px, 4vw, 48px); }

/* Contact form styles */
.form-section { max-width: 720px; margin: 0 auto; }
.form-tabs { display:flex; gap:12px; margin-bottom:12px; }
.form-tabs .tab { padding:8px 12px; border-radius:6px; cursor:pointer; background:transparent; border:1px solid transparent; }
.form-tabs .tab.ativo { border-color: #ccc; background: #fff; }
.form-linha { display:flex; gap:12px; margin-bottom:12px; }
.form-linha input[type="text"], .form-linha input[type="email"], .form-linha input[type="tel"], .form-linha textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 14px;
}
.form-linha label.btn-curriculo { display:inline-block; padding:10px 12px; background:#072C72; color:#fff; border-radius:8px; cursor:pointer; }
.btn-enviar { display:inline-block; padding:12px 18px; background:#072C72; color:#fff; border-radius:8px; border:0; cursor:pointer; }
.btn-enviar:hover { opacity: .95; }

/* Ensure forms stack on small screens */
@media (max-width: 600px) {
  .form-linha { flex-direction: column; }
  .container-forms-buttons button { width: 100%; }
}

/* Footer small tweaks */
@media (max-width: 768px) {
  .footer-logo img { max-width: 140px; }
}

/* Small screens: stack columns and reduce paddings */
@media (max-width: 992px) {
  .titulo-section { font-size: 40px; }
  .subtitulo { font-size: 24px; padding-top: 12px; }
  .card-produtos { padding: 16px; height: auto; }
  .card-produtos img { width: 140px; }
  .card-objetivo { width: 45%; }
  .container-objetivos { gap: 24px; }
}

@media (max-width: 768px) {
  /* Header adjustments */
  .container-header { padding: 0 12px; }
  #header { height: 64px; }
  .nav-menu { position: absolute; left: 0; right: 0; }

  /* Stack solution cards */
  .container-solucoes-30,
  .container-solucoes-25,
  .container-objetivos {
    flex-wrap: wrap;
  }
  .card-solucoes { flex: 1 1 100%; }
  .card-objetivo { width: 100%; }

  /* Produtos: let slides be responsive (Swiper controls number of slides) */
  .container-produtos { padding: 0 8px; }
  .card-produtos { max-width: 100%; height: auto; padding: 16px; }

  /* Contact section stacks vertically */
  .container-contato { flex-direction: column; gap: 24px; align-items: center; }
  .container-forms { margin: 20px 16px; }
  .container-forms-buttons { width: 100%; }
  .container-forms-buttons button { width: 48%; }

  /* Stack 'Quem Somos' (image + text) to avoid horizontal scroll */
  .container-img-black {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .container-img-black img {
    width: 100%;
    height: auto;
    max-width: 600px;
  }

  /* Allow client logos to wrap instead of overflowing on narrow screens */
  .logos-clientes {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .logos-clientes img {
    max-width: 140px;
    margin: 8px;
  }

  /* Footer stacks */
  .footer-container-1080 { display: flex; flex-direction: column; gap: 24px; align-items: center; }
  .footer-coluna, .footer-logo, .abac { width: 100%; height: auto; }
}

@media (max-width: 480px) {
  .titulo-section { font-size: 28px; }
  .subtitulo { font-size: 18px; }
  .container-header { padding: 0 8px; }
  .menu-hamburguer { display: block; }

  .container-forms-buttons { gap: 8px; }
  .container-forms-buttons button { width: 100%; padding: 12px 0; }

  .texto-sobre { padding: 32px; }
  .card-produtos img { width: 120px; }
  .card-solucoes { font-size: 13px; }
}

/* --- clientes.css --- */
.container-clientes {
    margin: 120px auto 0 auto;
    width: 100%;
    max-width: 1180px;
}

.logos-clientes {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 48px;
}

/* --- contato.css --- */
.contato {
    margin-top: 80px;
}

.container-contato {
    margin: 0 auto;
    width: 100%;
    max-width: 1180px;
    display: flex;
    justify-content: space-between;
}

.container-forms {
    width: 100%;
    margin: 40px 80px;
}

.container-forms-buttons {
    display: flex;
    gap: 24px;
}
.container-forms-buttons button {
    all: unset;
    width: 50%;
    text-align: center;
    padding-bottom: 12px;
}

.container-forms-buttons button.ativo,
.form-tabs .tab.ativo {
    border-bottom: 1px solid #555;
    padding-bottom: 12px;
}


.container-forms-buttons button:focus,
.form-tabs .tab:focus {
    border-bottom: 1px solid #555;
}

.footer-topo {
  width: 100%;
  height: 56px;
  background-color: #555555;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-topo a {
  color: #fff;
  text-decoration: none;
}

.footer-container {
  background: linear-gradient(
  180deg,
  #555555 0%,
  #707070 48%,
  #555555 100%
);

}

.footer-container-1080 {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 60px;
}

.footer-logo {
  width: 236px;
  height: 279px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.footer-titulo {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}

.footer-lista {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: left;
  gap: 12px;
  padding: 0;
}

.footer-lista li {
  list-style: none;
  color: #fff;
  font-size: 14px;
  text-align: left;
}

.associado-abac {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.footer-coluna {
  width: 260px;
  height: 279px;
}

.abac {
  width: 260px;
  height: 279px;
}

.footer-copy {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}