/* =====================================================================
   CICRON — Ajustes responsivos
   O site usa estilos inline (sem classes), então sobrepomos via
   seletores de atributo [style*="..."] + !important, aproveitando os
   data-screen-label que já existem nas seções.
   ===================================================================== */

/* Trava o scroll horizontal em qualquer tela, sem quebrar position:sticky
   (overflow-x: clip não cria contêiner de rolagem, ao contrário de hidden). */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
img, svg, video {
  max-width: 100%;
}

/* Controles de formulário respeitam a largura do contêiner (evita estouro
   de alguns px por padding/borda somados à largura). */
input, textarea, select, button {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Botão hambúrguer: escondido no desktop, exibido só no mobile (ver media query). */
.menu-btn { display: none; }
.menu-btn .icon-x { display: none; }

/* ---------------------------------------------------------------------
   TABLET  (≤ 1024px)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  [data-screen-label] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  header  { padding-left: 32px !important; padding-right: 32px !important; }
  footer  { padding-left: 40px !important; padding-right: 40px !important; }

  /* grids de 4 colunas -> 2 colunas */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---------------------------------------------------------------------
   MOBILE  (≤ 720px)
   --------------------------------------------------------------------- */
@media (max-width: 720px) {

  /* Toda grade multi-coluna vira coluna única */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Itens de grade/flex podem encolher abaixo do conteúdo (min-width:auto é
     o padrão e faz o track de 1fr esticar além do contêiner, causando estouro). */
  [style*="grid-template-columns"] > *,
  [style*="display: flex"] > * {
    min-width: 0 !important;
  }

  /* Paddings das seções (72px -> 20px, verticais mais enxutos) */
  [data-screen-label] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* -------- Header: logo | CTA + hambúrguer -------- */
  header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 16px !important;
  }
  /* Logo à esquerda (na Home é <img> solto; nas demais é <a><img>) */
  header > a:first-child,
  header > img:first-child { order: 0 !important; margin-right: auto !important; }
  header > a:first-child img,
  header > img:first-child { height: 34px !important; }

  /* Grupo de contato: esconde o telefone, mantém só o botão em destaque */
  header > div { order: 1 !important; gap: 8px !important; }
  header > div > a:first-child { display: none !important; }   /* telefone */
  header > div > a:last-child {                                 /* Falar com a CICRON */
    font-size: 13.5px !important;
    padding: 10px 15px !important;
    white-space: nowrap !important;
  }

  /* Botão hambúrguer visível */
  .menu-btn {
    display: inline-flex !important;
    order: 2 !important;
    flex: 0 0 auto !important;
  }
  html.nav-open .menu-btn .icon-bars { display: none !important; }
  html.nav-open .menu-btn .icon-x { display: block !important; }

  /* Nav vira dropdown acionado pelo hambúrguer */
  header nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #FFFFFF !important;
    padding: 6px 16px 14px !important;
    border-bottom: 1px solid #E4E9F5 !important;
    box-shadow: 0 16px 30px rgba(19, 20, 78, 0.10) !important;
    z-index: 60 !important;
  }
  html.nav-open header nav { display: flex !important; }
  header nav a {
    padding: 15px 6px !important;
    border-bottom: 1px solid #EEF2FA !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }
  header nav a:last-child { border-bottom: 0 !important; }

  /* -------- Footer: colunas empilhadas -------- */
  footer { padding: 44px 20px 28px !important; }
  footer > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }
  footer > div:first-child > div {   /* bloco de links do footer */
    flex-direction: column !important;
    gap: 32px !important;
  }
  footer > div:last-child {          /* linha de copyright */
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }

  /* -------- Tipografia reduzida -------- */
  h1 { font-size: 32px !important; line-height: 1.14 !important; }
  h2 { font-size: 26px !important; line-height: 1.2 !important; }
  h3 { font-size: 19px !important; }
  p  { font-size: 15.5px !important; }

  /* -------- Hero -------- */
  /* imagens/áreas altas encolhem */
  [style*="height: 440px"] { height: 230px !important; }
  [style*="height: 260px"] { height: 200px !important; }
  [style*="height: 220px"] { height: 180px !important; }
  [style*="height: 210px"] { height: 180px !important; }

  /* linhas de botões lado-a-lado passam a quebrar/empilhar */
  [style*="display: flex"][style*="gap: 16px"] { flex-wrap: wrap !important; }

  /* cartões de estatística que ficavam sobrepostos à imagem do hero
     saem do position:absolute e fluem logo abaixo dela */
  [style*="position: absolute"][style*="pointer-events: none"][style*="grid-template-columns"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 14px !important;
    gap: 12px !important;
  }
}

/* ---------------------------------------------------------------------
   MOBILE PEQUENO  (≤ 420px)
   --------------------------------------------------------------------- */
@media (max-width: 420px) {
  h1 { font-size: 29px !important; }
  h2 { font-size: 24px !important; }

  /* botões CTA ocupam a largura toda para não estourar */
  [data-screen-label] a[style*="border-radius: 10px"],
  [data-screen-label] a[style*="border-radius: 12px"] {
    text-align: center !important;
  }
}

/* ===================================================================
   Parede de logos de clientes (Home)
   =================================================================== */
.logo-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1024px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .logo-wall { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 420px)  { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
/* ===================================================================
   Dropdown de Servicos na navbar (hover, desktop)
   =================================================================== */
.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  z-index: 60;
  display: none;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown { display: block; }
.nav-dropdown-inner {
  background: #FFFFFF;
  border: 1px solid #E4E9F5;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(19, 20, 78, 0.12);
  padding: 8px;
  min-width: 280px;
}
.nav-dropdown-inner a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #13144E !important;
  white-space: nowrap;
}
.nav-dropdown-inner a:hover { background: #F5F7FC; color: #225ABB !important; }
@media (max-width: 720px) {
  .nav-dropdown { display: none !important; }
  .has-dropdown { display: block; width: 100%; }
}