/* =========================================================================
   Correções de responsividade mobile — Indaiatec
   -------------------------------------------------------------------------
   O site é um build Vite/React já compilado; não há código-fonte no projeto.
   Por isso as correções vivem aqui, num CSS carregado DEPOIS do bundle, e
   sobrepõem as classes utilitárias do Tailwind por ordem de cascata.

   Causa do corte lateral: o título do hero ("Soluções Industriais") usa
   text-5xl (48px) junto de whitespace-nowrap. Em telas de 360–390px o texto
   ocupa ~450px e empurra a largura do documento, o que faz o body inteiro
   rolar na horizontal e "cortar" as laterais de todas as seções.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Trava de segurança global
   Impede que qualquer elemento futuro volte a criar rolagem horizontal.
   Aplicado em html E body porque, sozinho no body, o iOS Safari ignora.
   ------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Nada dentro da página pode ultrapassar a largura da tela. */
#root {
  max-width: 100%;
  overflow-x: clip;
}

/* -------------------------------------------------------------------------
   2. Correções aplicadas apenas no mobile (< 640px = breakpoint sm: do Tailwind)
   ------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
  /* --- A causa raiz: o título do hero --- */
  /* Libera a quebra de linha e reduz o corpo para caber em telas estreitas. */
  #root h1.whitespace-nowrap,
  #root .whitespace-nowrap {
    white-space: normal;
  }

  #root h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.1;
    /* Quebra palavras longas ("Industriais") em vez de deixá-las vazar. */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* --- Botões do hero (CTA WhatsApp / Orçamento) --- */
  /* px-8 + text-base deixa os dois botões largos demais lado a lado;
     ocupam a linha inteira e ficam confortáveis para o toque. */
  #root section:first-of-type a[href*="wa.me"],
  #root section:first-of-type a[href^="#"] {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* --- Títulos de seção com tracking largo --- */
  /* tracking-[0.2em] em caixa alta estoura em palavras compridas. */
  #root .tracking-\[0\.2em\] {
    letter-spacing: 0.12em;
    overflow-wrap: break-word;
  }

  #root h2 {
    font-size: clamp(1.6rem, 7.5vw, 2.25rem);
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  /* --- Barra de estatísticas --- */
  /* Números text-4xl (36px) em grid-cols-2 com gap-8 apertam demais. */
  #root .text-4xl {
    font-size: 1.875rem;
  }

  /* Rótulos como "Comprometimento" (palavra única, uppercase + tracking-wider)
     não cabem na coluna de ~128px em telas de 320px. Reduz o espaçamento
     entre letras e permite a quebra em vez de deixar o texto cortado. */
  #root .uppercase.tracking-wider {
    letter-spacing: 0.03em;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* --- Galeria "sobre" com deslocamento vertical --- */
  /* O mt-6/-mt-6 é um efeito decorativo de desktop; no mobile só desalinha. */
  #root img.-mt-6 {
    margin-top: 0;
  }

  #root img.mt-6 {
    margin-top: 0;
  }

  /* --- Imagens e mídia --- */
  /* Garante que nenhuma imagem ou iframe (mapa) ultrapasse o container. */
  #root img,
  #root iframe,
  #root video,
  #root svg {
    max-width: 100%;
  }

  /* --- Botão flutuante do WhatsApp --- */
  /* bottom-6/right-6 sobrepõe conteúdo em telas curtas; aproxima da borda. */
  #root .fixed.bottom-6.right-6 {
    bottom: 1rem;
    right: 1rem;
  }
}

/* -------------------------------------------------------------------------
   3. Formulário de contato
   Fonte < 16px faz o iOS dar zoom automático ao focar o campo — e é esse
   zoom que "quebra" o layout e corta as laterais depois do primeiro toque.
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #root input,
  #root textarea,
  #root select {
    font-size: 16px;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------
   4. Grade da seção "Serviços"
   Com 7 cards, um grid de 3 colunas resulta em 3+3+1, deixando dois vazios
   à direita na última linha. Flexbox com justify-content:center centraliza
   a linha incompleta, e 4 colunas no desktop transformam 7 em 4+3 — duas
   linhas equilibradas, sem buraco visível.

   As larguras usam calc(% - fração do gap) para que N cards + (N-1) gaps
   fechem exatamente 100% da linha.
   ------------------------------------------------------------------------- */
#root .servicos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem; /* 24px, equivalente ao gap-6 original */
}

/* Celular: 1 card por linha. */
#root .servicos-grid > * {
  width: 100%;
}

/* Tablet (sm): 2 colunas — 2 cards + 1 gap de 24px. */
@media (min-width: 640px) {
  #root .servicos-grid > * {
    width: calc(50% - 0.75rem);
  }
}

/* Desktop (lg): 4 colunas — 4 cards + 3 gaps de 24px = 72px a distribuir. */
@media (min-width: 1024px) {
  #root .servicos-grid > * {
    width: calc(25% - 1.125rem);
  }
}