/* ==========================================================================
   GoX Tech — camada responsiva do site
   --------------------------------------------------------------------------
   Regras de ouro
   1. Desktop (>=1200px) permanece IDÊNTICO ao layout aprovado: as regras
      abaixo só existem dentro de @media (max-width) ou sobre classes gx-*
      que não alteram nada acima de 1200px.
   2. Os estilos inline das páginas vencem qualquer CSS externo; por isso as
      regras responsivas usam !important e classes gx-* (nunca [style*=...]).
   3. Breakpoints:  >=1200 desktop | 768–1199 tablet | <768 mobile | <=479 mobile pequeno
      Header vira hambúrguer em <=1099 (a navegação completa só cabe a partir de 1100).
   4. Gutter lateral: 48px (desktop) → 32px (tablet) → 20px (mobile).
   ========================================================================== */

:root {
  --gx-gutter: 48px;
  --gx-section-y: 80px;
}
@media (max-width: 1199px) {
  :root { --gx-gutter: 32px; --gx-section-y: 64px; }
}
@media (max-width: 767px) {
  :root { --gx-gutter: 20px; --gx-section-y: 48px; }
}

/* Base: nada vaza da largura da janela; mídia nunca estoura o contêiner. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { max-width: 100%; }
.gx-min0 { min-width: 0; }

/* Foco visível para teclado (acessibilidade) */
.gx-focus:focus-visible,
.gx-burger:focus-visible,
.gx-drawer a:focus-visible,
.gx-drawer button:focus-visible {
  outline: 2px solid var(--accent-blue, #2e7dd1);
  outline-offset: 2px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* 1100–1199: navegação um pouco mais compacta para caber sem quebrar */
@media (min-width: 1100px) and (max-width: 1199px) {
  .gx-hdr { padding-left: 32px !important; padding-right: 32px !important; }
  .gx-nav-desktop { gap: 22px !important; }
  .gx-hdr-cta { padding: 0 18px !important; }
}

/* <=1099: some a navegação, entra o botão de menu */
@media (max-width: 1099px) {
  .gx-hdr { padding-left: 32px !important; padding-right: 32px !important; }
  .gx-nav-desktop { display: none !important; }
  .gx-hdr-right { margin-left: auto; }
  .gx-burger { display: inline-flex !important; }
}

/* <768: barra mais baixa, CTA sai da barra (fica no menu) */
@media (max-width: 767px) {
  .gx-hdr { height: 64px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .gx-hdr-logo { height: 34px !important; }
  .gx-hdr-cta { display: none !important; }
}

/* Painel do menu (só existe abaixo de 1100) */
@media (min-width: 1100px) {
  .gx-drawer { display: none !important; }
}
/* itens do menu nunca encolhem: quando passa da altura da tela, o painel rola */
.gx-drawer > * { flex-shrink: 0; }
.gx-drawer {
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 767px) {
  .gx-drawer { max-height: calc(100vh - 64px); padding-left: 20px !important; padding-right: 20px !important; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
@media (max-width: 1199px) {
  .gx-ft-news, .gx-ft-grid, .gx-ft-legal {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .gx-ft-grid { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* Tablet estreito: 2 colunas */
@media (max-width: 899px) {
  .gx-ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
}

/* Mobile */
@media (max-width: 767px) {
  .gx-ft-news, .gx-ft-grid, .gx-ft-legal {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .gx-ft-news { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; padding-top: 32px !important; padding-bottom: 32px !important; }
  .gx-ft-form { width: 100%; }
  .gx-ft-input { flex: 1 1 auto; width: auto !important; min-width: 0; font-size: 16px !important; } /* 16px evita zoom automático no iOS */
  .gx-ft-legal { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .gx-ft a { min-height: 24px; }
}
@media (max-width: 559px) {
  .gx-ft-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
}

/* ==========================================================================
   PADRÃO DE CAPA (hero) — usado por Home e páginas de serviço
   >=1100  : capa full-bleed proporcional (cqw), idêntica ao desktop aprovado
   <=1099  : arte em cima (.gx-hero-art) + texto embaixo em fundo sólido.
             Motivo: a capa tem ~2,5:1; em 390px ela teria só 156px de altura,
             sem espaço para título + parágrafo + botões + chips.
   ========================================================================== */
.gx-hero-art { display: none; }
@media (max-width: 1099px) {
  .gx-hero { aspect-ratio: auto !important; background: #1a1b19 !important; }
  .gx-hero-art { display: block !important; width: 100%; aspect-ratio: 2 / 1; }
  .gx-hero-in { padding: 32px var(--gx-gutter) 44px !important; }
  .gx-hero-col { width: 100% !important; max-width: 640px; }
  .gx-hero-eyebrow { font-size: 12px !important; line-height: 18px !important; letter-spacing: 1.2px !important; margin-bottom: 12px !important; }
  .gx-hero-h1 { font-size: clamp(30px, 5.4vw, 44px) !important; line-height: 1.14 !important; letter-spacing: -0.4px !important; margin-bottom: 16px !important; }
  .gx-hero-h1 { width: auto !important; max-width: 640px; }
  .gx-hero-p { width: auto !important; max-width: 560px; font-size: 16px !important; line-height: 26px !important; margin-bottom: 24px !important; }
  .gx-hero-p .gx-br, .gx-hero-h1 .gx-br-m { display: none; }
  .gx-hero-btns { flex-direction: row !important; align-items: center !important; margin-left: 0 !important; flex-wrap: wrap; gap: 12px !important; margin-bottom: 28px !important; }
  .gx-hero-btn { height: 50px !important; padding: 0 26px !important; font-size: 15px !important; gap: 10px !important; }
  .gx-hero-btn-ic { width: 18px !important; height: 18px !important; }
  .gx-hero-chips { flex-wrap: wrap; gap: 14px 24px; }
  .gx-chip { padding: 0 !important; gap: 8px !important; }
  .gx-chip-div { display: none !important; }
  .gx-chip-ic { width: 22px !important; height: 22px !important; }
  .gx-chip-tx { font-size: 14px !important; }
}
@media (max-width: 767px) {
  .gx-hero-art { aspect-ratio: 16 / 10; }
  .gx-hero-in { padding-top: 28px !important; padding-bottom: 40px !important; }
  .gx-hero-h1 .gx-br-m { display: none; }
  .gx-hero-btns { flex-direction: column !important; align-items: stretch !important; }
  .gx-hero-btn { width: 100%; box-sizing: border-box; justify-content: center; height: 52px !important; }
  .gx-hero-chips { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}

/* ==========================================================================
   SEÇÕES GENÉRICAS (padding vertical, gutter, títulos)
   ========================================================================== */
@media (max-width: 1199px) {
  .gx-sec { padding-top: 64px !important; padding-bottom: 64px !important; }
  .gx-wrap { padding-left: 32px !important; padding-right: 32px !important; }
  .gx-block { padding: 56px 32px !important; gap: 40px !important; }
}
@media (max-width: 767px) {
  .gx-sec { padding-top: 48px !important; padding-bottom: 48px !important; }
  .gx-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .gx-block { padding: 40px 20px !important; gap: 28px !important; }
  .gx-h2 { font-size: 26px !important; line-height: 34px !important; }
  .gx-h3 { font-size: 24px !important; line-height: 32px !important; }
  .gx-lead { font-size: 16px !important; line-height: 25px !important; }
  .gx-sec-head { margin-bottom: 32px !important; }
}

/* Estatísticas da Home: 3 colunas → números menores → 1 coluna */
@media (max-width: 1199px) {
  .gx-stat-n { font-size: 44px !important; line-height: 48px !important; }
}
@media (max-width: 1023px) {
  .gx-stat-n { font-size: 34px !important; line-height: 40px !important; }
  .gx-stats-grid { gap: 24px !important; }
}
@media (max-width: 767px) {
  .gx-stats-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .gx-stat-n { font-size: 44px !important; line-height: 48px !important; }
}

/* Grades de cards */
@media (max-width: 1023px) {
  .gx-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gx-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 639px) {
  .gx-svc-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .gx-steps-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
}

/* Bloco "imagem + texto" (480px no desktop)
   1024–1199: imagem vira 44% da linha (mesma proporção 6:5 do desktop)
   <1024    : empilha, imagem primeiro, largura total até 640px */
@media (max-width: 1199px) {
  .gx-block-img { flex: 0 0 44% !important; width: 44% !important; height: auto !important; aspect-ratio: var(--gx-ar, 6 / 5); }
}
@media (max-width: 1023px) {
  .gx-block { flex-direction: column !important; align-items: stretch !important; }
  .gx-block-img { flex: 0 0 auto !important; width: 100% !important; max-width: 640px; }
  .gx-block-text { flex: 0 0 auto !important; width: 100%; }
}
@media (max-width: 639px) {
  .gx-mini { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .gx-block-cta { display: flex !important; width: 100%; box-sizing: border-box; justify-content: center; height: 52px !important; }
}

/* Variações usadas pelas páginas de serviço */
@media (max-width: 1199px) { .gx-sec-sm { padding-top: 40px !important; padding-bottom: 40px !important; } }
@media (max-width: 767px)  { .gx-sec-sm { padding-top: 32px !important; padding-bottom: 32px !important; } }

/* "Soluções": 4 → 2 → 1 colunas */
@media (max-width: 1023px) { .gx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 639px)  { .gx-grid-4 { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } }

/* "Outros produtos": 5 colunas no desktop.
   768–1199: grade de 6 trilhos — 3 cards em cima (span 2) e 2 embaixo (span 3), sem buraco
   480–767 : 2 colunas, o 5º card ocupa a linha inteira
   <480    : 1 coluna */
@media (max-width: 1199px) {
  .gx-grid-5 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px !important; }
  .gx-grid-5 > * { grid-column: span 2; }
  .gx-grid-5 > :nth-child(4), .gx-grid-5 > :nth-child(5) { grid-column: span 3; }
}
@media (max-width: 767px) {
  .gx-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  .gx-grid-5 > *, .gx-grid-5 > :nth-child(4) { grid-column: span 1; }
  .gx-grid-5 > :nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .gx-grid-5 { grid-template-columns: minmax(0, 1fr) !important; }
  .gx-grid-5 > *, .gx-grid-5 > :nth-child(4), .gx-grid-5 > :nth-child(5) { grid-column: 1 / -1; }
}

/* ==========================================================================
   PÁGINAS INSTITUCIONAIS (Sobre, Contato, Política, Download)
   ========================================================================== */

/* Capa padrão escura das páginas do menu Sobre/Contato */
@media (max-width: 1199px) {
  .gx-cover { padding: 64px 32px 68px !important; }
  .gx-h1-page { font-size: 36px !important; line-height: 44px !important; }
}
@media (max-width: 767px) {
  .gx-cover { padding: 48px 20px 52px !important; }
  .gx-h1-page { font-size: 30px !important; line-height: 38px !important; }
}

/* Contato: 2 colunas → empilha abaixo de 1024, com o FORMULÁRIO primeiro
   (quem chega no celular quer escrever; o endereço vem depois). */
@media (max-width: 1199px) {
  .gx-contact-info { flex: 0 0 42% !important; }
  .gx-contact-form { padding: 32px 28px 36px !important; }
}
@media (max-width: 1023px) {
  .gx-contact-row { flex-direction: column-reverse !important; gap: 24px !important; }
  .gx-contact-info { flex: 0 0 auto !important; width: 100%; }
}
@media (max-width: 767px) {
  .gx-contact-info { padding: 24px 20px !important; }
  .gx-contact-form { padding: 24px 20px 28px !important; }
  .gx-form-row { flex-direction: column !important; gap: 20px !important; }
  .gx-map { height: 220px !important; }
  .gx-tap { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* área de toque 44px sem mudar o espaçamento visual */
  .gox-field { font-size: 16px !important; }   /* 16px evita o zoom automático do iOS ao focar */
}

/* Sobre */
@media (max-width: 1023px) {
  .gx-about-row { flex-direction: column !important; gap: 28px !important; }
  .gx-about-side { flex: 0 0 auto !important; width: 100%; }
}
@media (max-width: 767px) {
  .gx-about-stats { flex-wrap: wrap; gap: 20px 32px !important; }
  .gx-two-col { flex-direction: column !important; }
  .gx-mv-card { padding: 28px 22px 30px !important; }
  .gx-gallery { flex-direction: column !important; gap: 16px !important; }
  .gx-gallery > div { flex: 0 0 auto !important; height: 200px !important; }
}
/* Valores (7 cards): 4 por linha até 1024px (4+3 centralizado, como no desktop) → 2 → 1 */
@media (max-width: 1023px) { .gx-val { flex: 0 0 calc((100% - 20px) / 2) !important; } }
@media (max-width: 559px)  { .gx-val { flex: 0 0 100% !important; } }

/* Política de privacidade: índice + texto → empilha; índice vira menu que abre/fecha ("Nesta página") */
@media (max-width: 1023px) {
  .gx-doc-row { flex-direction: column !important; gap: 24px !important; }
  .gx-toc { position: static !important; flex: 0 0 auto !important; width: 100%; max-height: none !important; overflow: visible !important; padding: 8px 20px !important; }
  .gx-doc { max-width: 100% !important; width: 100%; }
}
@media (max-width: 767px) {
  .gx-doc-h2 { font-size: 24px !important; line-height: 32px !important; margin-top: 44px !important; }
  .gx-doc-h3 { font-size: 20px !important; line-height: 28px !important; margin-top: 36px !important; }
}
.gx-doc { overflow-wrap: anywhere; }
.gx-doc-h2, .gx-doc-h3 { scroll-margin-top: 16px; }

/* Download do app — capa full-bleed (mesmo padrão .gx-hero); aqui só a arte própria e os selos das lojas */
@media (max-width: 1099px) {
  .gx-hero-art-dl { aspect-ratio: 4 / 3; }
  .gx-dl-badges { flex-wrap: wrap; gap: 12px !important; margin-bottom: 4px; }
  .gx-dl-badge { width: auto !important; height: 56px !important; padding: 0 22px !important; gap: 10px !important; border-radius: 4px !important; }
  .gx-dl-ic { width: 22px !important; height: 22px !important; }
  .gx-dl-cap { font-size: 10.5px !important; line-height: 13px !important; }
  .gx-dl-name { font-size: 17px !important; line-height: 20px !important; }
}
@media (max-width: 767px) {
  .gx-hero-art-dl { aspect-ratio: 1 / 1; }
  .gx-dl-badge { flex: 1 1 200px; justify-content: center; box-sizing: border-box; }
}

/* Legibilidade no celular: fontes de fonte/legenda nunca abaixo de 12px (legendas de loja 11px, em caixa alta) */
@media (max-width: 767px) {
  .gx-cite { font-size: 12px !important; line-height: 17px; }
  .gx-dl-cap { font-size: 11px !important; line-height: 14px !important; }
}

/* Títulos balanceados (evita palavra órfã na última linha) — só abaixo de 1200px, o desktop não muda */
@media (max-width: 1199px) {
  .gx-h2, .gx-h3, .gx-hero-h1, .gx-h1-page, .gx-doc-h2, .gx-doc-h3 { text-wrap: balance; }
}
/* Subtítulo centralizado abaixo do h2 ("Soluções"): entrelinha confortável quando quebra em várias linhas */
@media (max-width: 767px) {
  .gx-wrap > h2.gx-h2 + p { line-height: 24px !important; }
}
/* Rodapé no celular: links e ícones com área de toque de ~44px */
@media (max-width: 767px) {
  .gx-ft-links { gap: 0 !important; }
  .gx-ft-links a { display: flex; align-items: center; min-height: 44px; }
  .gx-ft-soc { width: 44px !important; height: 44px !important; }
}

/* Índice da Política: no desktop é uma coluna fixa sempre aberta (botão inerte);
   <1024 vira um menu recolhível — fechado por padrão, com o corpo rolável quando aberto. */
.gx-toc-btn { pointer-events: none; cursor: default; }
.gx-toc-chev { display: none; }
@media (max-width: 1023px) {
  .gx-toc-btn { pointer-events: auto; cursor: pointer; min-height: 48px; margin-bottom: 0 !important; }
  .gx-toc-chev { display: block; transition: transform .2s ease; }
  .gx-toc-btn[aria-expanded="true"] .gx-toc-chev { transform: rotate(180deg); }
  .gx-toc-body[data-open="false"] { display: none; }
  .gx-toc-body[data-open="true"] { max-height: 320px; overflow-y: auto; padding-bottom: 8px; border-top: 1px solid var(--border); }
  .gx-toc-body a { min-height: 44px; box-sizing: border-box; display: flex !important; align-items: center; }
}

/* ==========================================================================
   Ícone flutuante do WhatsApp (criado por i18n/whatsapp.js em todas as páginas)
   Fixo no canto inferior direito da janela; não altera o layout das páginas.
   ========================================================================== */
.gx-wa-float {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 45;                     /* abaixo do cabeçalho/menu (50) */
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22), 0 0 0 0 rgba(37,211,102,0.45);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.gx-wa-float:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,0.26); }
.gx-wa-float:focus-visible { outline: 3px solid var(--ink, #1d1e1b); outline-offset: 3px; }
.gx-wa-float svg { width: 32px; height: 32px; display: block; }
@media (max-width: 767px) {
  .gx-wa-float {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 56px; height: 56px;
  }
  .gx-wa-float svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .gx-wa-float { transition: none; } .gx-wa-float:hover { transform: none; } }
@media print { .gx-wa-float { display: none !important; } }