/* ─── Responsive Styles — AgroVisão ─────────────────────────────────
   Sprint 1: classes semânticas preparadas.
   Sprint 2A: navegação responsiva + Drawer.
   Sprint 2B+: demais seções.
   ──────────────────────────────────────────────────────────────────── */

/*
   Breakpoints:
   Desktop:       ≥ 1024px  (sem alterações — layout aprovado)
   Tablet:     768–1023px   → Drawer
   Mobile:      até  767px  → Drawer
   Small mobile: até 480px
*/

/* ═══════════════════════════════════════════════════════════════════════
   HAMBURGER — oculto no desktop, visível em ≤ 1023px
═══════════════════════════════════════════════════════════════════════ */

.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.12);
}

.nav-hamburger:focus-visible {
  outline: 2px solid #b8d48a;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DRAWER OVERLAY
═══════════════════════════════════════════════════════════════════════ */

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(8, 18, 6, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   DRAWER PANEL
═══════════════════════════════════════════════════════════════════════ */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1100;
  width: 300px;
  height: 100%;
  background: #131e11;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
}

.drawer.is-open {
  transform: translateX(0);
}

/* body scroll lock */
body.drawer-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   DRAWER INTERIOR
═══════════════════════════════════════════════════════════════════════ */

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(184, 212, 138, 0.12);
  flex-shrink: 0;
}

.drawer-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(184, 212, 138, 0.2);
  border-radius: 8px;
  color: #f6f4ef;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.drawer-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(184, 212, 138, 0.4);
}

.drawer-close:focus-visible {
  outline: 2px solid #b8d48a;
  outline-offset: 2px;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 28px 16px 20px;
  flex: 1;
}

.drawer-link {
  display: block;
  padding: 13px 16px;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.72);
  text-decoration: none;
  border-radius: 8px;
  transition:
    background 0.18s,
    color 0.18s;
}

.drawer-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f6f4ef;
}

.drawer-link:focus-visible {
  outline: 2px solid #b8d48a;
  outline-offset: 2px;
}

.drawer-link--active {
  color: #b8d48a;
  background: rgba(184, 212, 138, 0.08);
}

.drawer-link--active:hover {
  background: rgba(184, 212, 138, 0.12);
  color: #b8d48a;
}

.drawer-footer {
  padding: 16px 16px 32px;
  border-top: 1px solid rgba(184, 212, 138, 0.12);
  flex-shrink: 0;
}

.drawer-cta {
  display: block;
  text-align: center;
  padding: 14px 24px;
  background: #315b2c;
  color: #f6f4ef;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.22s;
}

.drawer-cta:hover {
  background: #254822;
}

.drawer-cta:focus-visible {
  outline: 2px solid #b8d48a;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET  (≤ 1023px) — ativa o drawer, oculta nav horizontal
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  /* esconde o menu horizontal */
  .nav-links {
    display: none !important;
  }

  /* exibe o hamburguer */
  .nav-hamburger {
    display: flex;
  }

  /* ── NAV mobile: padding compacto + safe area ── */
  .nav {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* safe area — iPhone notch / Dynamic Island (requer viewport-fit=cover) */
  @supports (padding-top: env(safe-area-inset-top)) {
    .nav {
      padding-top: max(12px, calc(8px + env(safe-area-inset-top))) !important;
      padding-left: max(
        20px,
        calc(20px + env(safe-area-inset-left))
      ) !important;
      padding-right: max(
        20px,
        calc(20px + env(safe-area-inset-right))
      ) !important;
    }

    .drawer {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .drawer-header {
      padding-top: max(24px, calc(20px + env(safe-area-inset-top)));
    }
  }

  /* NAV — logotipo */
  .nav-logo {
  }

  /* HERO — header passa a ocupar espaço real do fluxo (drawer mode) */
  :root {
    --header-offset: var(--header-height-tablet);
  }

  /* HERO — Sprint Hero 2: pequenos refinamentos de tablet.
     Mobile (≤768px) carrega a padronização completa; aqui só ajustamos
     o que o espaço reduzido exige, sem alterar a composição do desktop. */
  .hero {
    height: 78vh !important;
    min-height: 560px !important;
  }

  .hero-content {
    padding: 0 48px 88px !important;
  }

  .hero-inner {
    max-width: 620px !important;
    margin-top: 0 !important;
  }

  .hero-inner h1 {
    font-size: clamp(38px, 5.6vw, 58px) !important;
    margin-bottom: 22px !important;
  }

  .hero-inner p {
    font-size: 14.5px !important;
    margin-bottom: 32px !important;
  }

  .hero-inner a {
    padding: 14px 28px !important;
    font-size: 11px !important;
  }

  .hero-wave {
  }

  /* LAYOUT */
  .container {
  }

  /* SERVICOS */
  .services-nav {
  }
  .services-tabs {
  }
  .service-grid {
  }
  .service-grid--reverse {
  }
  .service-panel {
  }
  .service-panel--white {
  }

  /* PROJETOS */
  .section-credentials {
  }
  .stats-grid-4 {
  }
  .credentials-strip {
  }
  .section-editorial {
  }
  .editorial-grid {
  }
  .section-categories {
  }
  .categories-grid {
  }

  /* ─── PROJETOS SEÇÃO 4: Projetos em Destaque (Tablet) ─── */
  .section-categories
    + section
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 80px"] {
    gap: 48px !important;
  }

  .section-logos {
  }
  .logos-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ─── PROJETOS SEÇÃO 7: Nossa Metodologia (Tablet) ─── */
  /* Desktop: 7 colunas com linha horizontal. Tablet: adaptar para melhor leitura */
  div[style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* ─── PROJETOS SEÇÃO 8: Diferenciais (Tablet) ─── */
  /* Desktop: 2 colunas com gap 100px. Tablet: reduzir gap para melhor espaçamento */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"] {
    gap: 48px !important;
  }

  /* CONTATO */
  .section-contact {
  }
  .contact-grid {
  }
  .section-social {
  }
  .social-grid {
  }
  .section-map {
  }
  .map-grid {
  }
  /* ─── CONTATO SEÇÃO 4: Por que nos contatar (Tablet ≤1023px) ─── */
  .section-reasons {
    padding: 100px 0 !important;
  }
  .section-reasons > .container {
    padding: 0 48px !important;
  }
  .section-reasons > .container > div:first-child {
    margin-bottom: 64px !important;
  }
  .section-reasons > .container > div:first-child h2 {
    font-size: clamp(32px, 4vw, 48px) !important;
  }
  .reasons-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
  }
  .reasons-grid > div {
    padding: 32px 28px !important;
    border-radius: 12px !important;
  }
  .reasons-grid > div > div:first-child {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  .reasons-grid > div > div:first-child > div {
    width: 28px !important;
    height: 28px !important;
  }
  .reasons-grid > div > div:first-child h3 {
    font-size: 19px !important;
  }
  .reasons-grid > div > p {
    font-size: 12.5px !important;
  }

  /* SHARED */
  .section-cta-dark {
    padding: 100px 0 !important;
  }
  .section-cta-dark > div {
    padding: 0 48px !important;
  }
  .section-cta-dark > div > div:first-child {
    margin-bottom: 24px !important;
  }
  .section-cta-dark h2 {
    font-size: clamp(32px, 4.2vw, 54px) !important;
    margin-bottom: 20px !important;
  }
  .section-cta-dark p {
    font-size: 14px !important;
    margin-bottom: 40px !important;
  }
  .section-cta-dark > div > div:last-child {
    gap: 12px !important;
  }
  .section-cta-dark a {
    padding: 14px 36px !important;
    font-size: 10.5px !important;
  }

  /* MODAL */
  .modal-overlay {
  }
  .modal {
  }
  .form-grid {
  }

  /* FOOTER */
  .footer {
    --footer-padding: 64px 0 32px;
    --footer-gap: 40px;
  }
  .footer-container {
    padding: 0 40px;
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .footer-bottom {
  }

  /* FIXED */
  .wa-fab {
  }

  /* ─── CONTATO SEÇÃO 2: Redes Sociais (Tablet ≤1023px) ─── */
  .section-social {
  }
  .section-social > .container {
    padding: 0 40px !important;
  }
  .social-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  /* ─── CONTATO SEÇÃO 3: Onde estamos (Tablet ≤1023px) ─── */
  .section-map {
  }
  .map-grid {
    grid-template-columns: 350px 1fr !important;
    gap: 48px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE  (≤ 768px)
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* NAV */
  .nav {
  }
  .nav-logo {
  }
  .nav-links {
  }

  /* HERO */
  :root {
    --header-offset: var(--header-height-mobile);
  }

  /* HERO — Sprint Hero 2: padrão único mobile-first, válido para
     index/sobre/servicos/projetos/contato. Toda regra abaixo usa apenas
     as classes já existentes no markup (.hero, .hero-content,
     .hero-inner, .hero-wave) e seletores descendentes sobre elas — sem
     classes novas e sem CSS específico por página. !important é
     necessário porque o HTML define os valores originais inline. */

  /* 6. Altura — ocupa a primeira dobra sem exagero, igual em todas as
        páginas, independente do vh/min-height definido inline por Hero. */
  .hero {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 560px !important;
    max-height: 740px !important;
  }

  /* 1 + 2 + 3. Espaçamento, alinhamento e reposicionamento vertical.
        O conteúdo agora é distribuído no centro da altura útil (45–75%),
        não mais encostado na base. Padding inferior reserva espaço para
        onda + respiro + proximidade com WhatsApp FAB em qualquer página. */
  .hero-content {
    padding: 0 24px var(--hero-safe-area-bottom) !important;
    justify-content: space-around !important;
    align-items: stretch !important;
  }

  .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  /* 3. Tipografia — hierarquia consistente badge → título → descrição. */
  .hero-inner > div:first-child span {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }

  .hero-inner > div:first-child {
    margin-bottom: 18px !important;
  }

  .hero-inner h1 {
    font-size: clamp(30px, 8.6vw, 42px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 16px !important;
  }

  .hero-inner p {
    font-size: 14px !important;
    line-height: 1.62 !important;
    max-width: 100% !important;
    margin-bottom: 26px !important;
  }

  /* 4. Botões — mesma altura, largura confortável, empilhados com
        espaçamento consistente, independente do wrapper de cada página. */
  .hero-inner a {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    font-size: 11.5px !important;
    box-sizing: border-box !important;
  }

  .hero-inner a + a {
    margin-top: 12px !important;
  }

  /* 1. Ocultar elementos decorativos inferiores no mobile.
        Badges, indicadores e chips informativos ocupam espaço precioso
        e ficam muito próximos da onda. Continuam visíveis em desktop/tablet. */
  .hero-badges {
    display: none !important;
  }

  .hero-badges span {
    font-size: 10.5px !important;
  }

  /* 5. Imagem — mesmo ponto focal em todas as páginas no mobile,
        mantendo object-fit: cover já definido inline. */
  .hero > img {
    object-position: center 38% !important;
  }

  .hero-wave {
  }

  /* ═══════════════════════════════════════════════════════════════════════
     SPRINT SECTION 1 — Primeira Seção Pós-Hero (Mobile First)
     ═══════════════════════════════════════════════════════════════════════ */

  /* LAYOUT — padding lateral aumentado para respiro visual */
  .container {
    padding: 0 18px !important;
  }

  /* Seções: ajustar padding vertical para distribuição balanceada */
  .section-services,
  .section-about,
  .section-what,
  .section-credentials,
  .section-process,
  .section-contact,
  .section-cta-dark {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Títulos principais (h2): melhor hierarquia e espaçamento */
  .container h2 {
    margin-bottom: 32px !important;
    margin-top: 0 !important;
    font-size: clamp(24px, 6.5vw, 38px) !important;
  }

  /* Subtítulos (h3, h4): espaçamento reduzido */
  .container h3 {
    margin-bottom: 12px !important;
    margin-top: 0 !important;
    font-size: 16px !important;
  }

  /* Parágrafos: tipografia otimizada para leitura confortável */
  .container p {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
  }

  /* Badge/label uppercase: espaçamento consistente */
  .container [style*="letter-spacing: 0"] {
    display: block !important;
    margin-bottom: 18px !important;
  }

  /* GRIDS — redimensionar para mobile */
  .services-grid {
    flex-direction: column !important;
    gap: 18px !important;
  }

  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .stats-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
  }

  .stats-grid-4 > div {
    padding: 28px 18px !important;
    border-bottom: 1px solid rgba(49, 91, 44, 0.1) !important;
  }

  .stats-grid-4 > div:last-child {
    border-bottom: none !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .service-grid {
    gap: 24px !important;
    row-gap: 24px !important;
  }

  /* CARDS — padding e spacing melhorados */
  .svc-card {
    padding: 22px !important;
  }

  /* ─── SERVIÇOS: Refinamento mobile-first ─── */
  /* ABAS de serviço — navegação realmente utilizável */
  .services-nav {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(49, 91, 44, 0.08) !important;
  }

  .services-nav > .container {
    padding: 0 18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Fallback seletor mais específico */
  section.services-nav > div.container {
    padding: 0 18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .services-tabs {
    flex-direction: column !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }

  .services-tabs a {
    width: 100% !important;
    padding: 16px 18px !important;
    font-size: 14px !important;
    white-space: normal !important;
    flex-shrink: 1 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #E8E8E8 !important;
    transition:
      background 0.2s,
      color 0.2s !important;
    text-align: left !important;
  }

  .services-tabs a:hover {
    background: rgba(49, 91, 44, 0.06) !important;
  }

  /* Grid de serviços: garantir 1 coluna com espaçamento balanceado */
  .service-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Painel de serviço: conteúdo alinhado melhor */
  .service-panel {
    padding: 24px !important;
    gap: 20px !important;
  }

  /* ─── SOBRE: Ocultar imagem lateral, manter texto 100% ─── */
  .about-grid > div:first-child {
    display: none !important;
  }

  .about-grid > div:nth-child(2) {
    width: 100% !important;
  }

  /* STATS row — distribuição vertical em mobile */
  .stats-row {
    gap: 20px !important;
    flex-direction: column !important;
  }

  .stats-row > div {
    width: 100% !important;
  }

  /* ─── SOBRE SEÇÃO 3: O Que Fazemos (Mobile First) ─── */
  /* Cabeçalho com título e descrição — centralizar */
  .section-what > .container > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 48px !important;
  }

  .section-what > .container > div:first-child > div {
    text-align: center !important;
  }

  .section-what > .container > div:first-child > p {
    text-align: center !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Grid de serviços — 1 coluna, espaçamento uniforme */
  .services-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Cards individuais — centralizar conteúdo, padding ajustado */
  .services-grid-4 > div {
    text-align: center !important;
    padding: 24px 20px !important;
  }

  /* Ícones — centralizados com margem inferior */
  .services-grid-4 > div svg {
    display: block !important;
    margin: 0 auto 16px !important;
  }

  /* Títulos dos cards — centralizados */
  .services-grid-4 > div h3 {
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  /* Descrição dos cards — centralizada com margem inferior */
  .services-grid-4 > div p {
    text-align: center !important;
    margin-bottom: 18px !important;
  }

  /* Link "Saiba mais" — centralizado */
  .services-grid-4 > div a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    margin: 0 auto !important;
  }

  /* ─── SOBRE SEÇÃO 4: Como Trabalhamos (Mobile First) ─── */
  /* Cabeçalho com título e descrição — centralizar */
  .section-process > .container > div:first-child {
    text-align: center !important;
    margin-bottom: 48px !important;
  }

  .section-process > .container > div:first-child span {
    display: block !important;
    margin-bottom: 16px !important;
  }

  .section-process > .container > div:first-child h2 {
    font-size: clamp(28px, 6vw, 42px) !important;
    margin-bottom: 0 !important;
  }

  /* Grid de passos — 1 coluna, empilhado verticalmente */
  .process-steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Cada passo — transformar em card visual */
  .process-steps > div {
    border-top: none !important;
    border-bottom: 2px solid #b8d48a !important;
    padding: 24px 20px !important;
    padding-top: 24px !important;
    position: relative !important;
    background: transparent !important;
  }

  /* Remover o ponto de posição absoluta do topo e repositionar (sobre.html) */
  .process-steps > div > div:first-child {
    position: relative !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-bottom: 16px !important;
    left: auto !important;
    top: auto !important;
  }

  /* Número da etapa — destaque visual */
  .process-steps > div > div:nth-child(2) {
    font-size: 36px !important;
    margin-bottom: 12px !important;
  }

  /* Título da etapa — capitalização e espaçamento */
  .process-steps > div h3 {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }

  /* Descrição da etapa — leitura confortável */
  .process-steps > div p {
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
  }

  /* ─── HOME SEÇÃO 4: Nosso Processo (Mobile First) ─── */

  /* Linha conectora horizontal — ocultar (exclusiva da Home, inexistente no sobre.html) */
  .section-process > .container > div > div[style*="height: 1px"] {
    display: none !important;
  }

  /* Preservar círculos numerados da Home: impedir que a regra genérica do sobre.html
     (width/height: 8px) destrua os círculos de 44px. O ponto do sobre.html tem
     "position: absolute" no atributo style; os círculos da home não têm. */
  .process-steps > div > div:first-child:not([style*="position: absolute"]) {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 14px !important;
    left: auto !important;
    top: auto !important;
  }

  /* Impedir que o font-size 36px (destinado ao número do sobre.html) seja aplicado
     ao título do passo da Home. Os títulos têm text-transform:uppercase; os números
     do sobre.html não — isso permite diferenciar sem classes novas. */
  .process-steps > div > div:nth-child(2)[style*="text-transform: uppercase"] {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }

  /* Descrição do passo — terceiro filho, exclusivo da estrutura da Home
     (sobre.html usa h3/p, não div:nth-child(3)) */
  .process-steps > div > div:nth-child(3) {
    font-size: 12px !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
  }

  /* Remover borda inferior do último passo */
  .process-steps > div:last-child {
    border-bottom: none !important;
  }

  /* ─── HOME SEÇÃO 5: Diferenciais (Mobile First) ─── */
  .section-diff {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .section-diff > .container {
    padding: 0 18px !important;
  }

  .section-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 40px !important;
    gap: 24px !important;
  }

  .section-header-row > div:first-child h2 {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    margin-bottom: 8px !important;
  }

  .section-header-row > a {
    width: 100% !important;
    padding: 13px 16px !important;
    font-size: 10px !important;
    text-align: center !important;
  }

  .diff-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .diff-card {
    padding: 24px 16px !important;
  }

  .diff-card > div[style*="width: 44px"] {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 14px !important;
  }

  .diff-card > div[style*="width: 44px"] svg {
    width: 18px !important;
    height: 18px !important;
  }

  .diff-card h3 {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .diff-card p {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  /* ─── SOBRE SEÇÃO 5: Por que escolher a AgroVisão (Mobile ≤768px) ─── */
  /* Transformar grid sticky de 2 colunas (360px 1fr) para 1 coluna */
  .diff-sticky-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Desativar sticky no mobile para permitir fluxo natural */
  .diff-sticky-grid > div:first-child {
    position: relative !important;
    top: auto !important;
  }

  /* Grid de diferenciais: transformar de 2 colunas para 1 */
  .diff-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Remover borders direita e ajustar padding dos cards */
  .diff-grid-2 > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(49, 91, 44, 0.1) !important;
    padding: 24px 0 !important;
  }

  .diff-grid-2 > div:last-child {
    border-bottom: none !important;
  }

  /* ─── SOBRE SEÇÃO 6: Nossa Experiência em Campo (Mobile First) ─── */
  /* Cabeçalho — transformar flex horizontal em vertical centralizado */
  .section-gallery > div:first-child {
    padding: 64px 18px 0 !important;
  }

  .section-gallery > div:first-child > div {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 32px !important;
  }

  .section-gallery > div:first-child > div > div {
    text-align: center !important;
  }

  .section-gallery > div:first-child > div > p {
    text-align: center !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Galeria — transformar para 1 coluna, remover altura fixa */
  .section-gallery > div:last-child {
    padding: 0 18px 64px !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    height: auto !important;
  }

  /* Flex column dentro da galeria — ajustar altura dinâmica */
  .gallery-grid > div {
    min-height: 240px !important;
  }

  .gallery-grid > div > img {
    display: block !important;
    width: 100% !important;
  }

  .gallery-grid > div[style*="flex-direction: column"] {
    gap: 3px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .gallery-grid > div[style*="flex-direction: column"] > div {
    flex: 1 !important;
    min-height: 180px !important;
    overflow: hidden !important;
  }

  /* ─── SERVIÇOS: Tabs — Refinement Tablet (≤1023px) ─── */
  .services-nav {
    padding-top: 52px !important;
    padding-bottom: 36px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(49, 91, 44, 0.08) !important;
  }

  .services-nav > .container {
    padding: 0 48px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  section.services-nav > div.container {
    padding: 0 48px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .services-tabs {
    gap: 14px !important;
    padding-bottom: 12px !important;
    scroll-padding-left: 24px !important;
    scroll-snap-type: x mandatory !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .services-tabs a {
    padding: 11px 18px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    transition:
      background 0.2s,
      color 0.2s !important;
  }

  .services-tabs a:hover {
    background: rgba(49, 91, 44, 0.06) !important;
  }

  .service-grid {
  }
  .service-grid--reverse {
  }
  .service-panel {
  }
  .service-panel--white {
  }

  /* PROJETOS */
  .section-credentials {
  }
  .stats-grid-4 {
  }
  .credentials-strip {
  }
  .section-editorial {
  }
  .editorial-grid {
  }

  /* ─── SPRINT SECTION 3 — Categorias de Projetos (Mobile First) ─── */
  .section-categories {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .section-categories > .container > div:first-child {
    text-align: center !important;
    margin-bottom: 48px !important;
  }

  .section-categories > .container > div:first-child > div {
    justify-content: center !important;
    margin-bottom: 18px !important;
  }

  .section-categories > .container > div:first-child > div > span {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }

  .section-categories > .container > div:first-child h2 {
    font-size: clamp(24px, 6.5vw, 38px) !important;
    margin-bottom: 12px !important;
  }

  .section-categories > .container > div:first-child p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  .categories-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .cat-card {
    padding: 22px 18px !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }

  .cat-card[style*="background: #315B2C"] {
    background: #315b2c !important;
    border-color: #315b2c !important;
  }

  .cat-card > div[style*="width: 52px"] {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 14px !important;
  }

  .cat-card h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
  }

  .cat-card > div[style*="width: 18px"] {
    width: 16px !important;
    height: 2px !important;
  }

  /* ─── PROJETOS SEÇÃO 4: Projetos em Destaque (Mobile First) ─── */
  .section-categories + section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .section-categories + section .container > div:first-child {
    margin-bottom: 40px !important;
  }

  /* Project rows: single column */
  .section-categories
    + section
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 80px"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 56px !important;
  }

  /* Remove bottom margin from last project row */
  .section-categories + section .container > div:last-child {
    margin-bottom: 0 !important;
  }

  /* Images: full width, proportional */
  .section-categories + section div[style*="aspect-ratio: 4/3"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Institution / CTA footer: stack vertically on narrow screens */
  .section-categories
    + section
    div[style*="justify-content: space-between"][style*="padding-top: 22px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .section-logos {
  }
  .logos-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .logo-card {
    padding: 18px 12px !important;
    min-height: auto !important;
    gap: 10px !important;
  }

  .logo-card img {
    max-height: 50px !important;
  }

  .logo-card > div:last-child > div:first-child {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .logo-card > div:last-child > div:last-child {
    font-size: 8px !important;
    margin-top: 2px !important;
  }

  /* ─── PROJETOS SEÇÃO 7: Nossa Metodologia (Mobile First) ─── */
  /* Transform horizontal timeline (7 cols) to vertical single column */
  div[style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Hide horizontal line, show vertical connector via position */
  div[style*="position: absolute"][style*="top: 27px"][style*="left: 40px"][style*="right: 40px"][style*="height: 1px"] {
    display: none !important;
  }

  /* Timeline step card: center content, add vertical spacing */
  div[style*="grid-template-columns: repeat(7, 1fr)"] + div,
  div[style*="grid-template-columns: repeat(7, 1fr)"] > div {
    text-align: center;
    padding: 24px 20px !important;
  }

  /* Timeline circle: keep prominent, ensure visibility */
  div[style*="grid-template-columns: repeat(7, 1fr)"]
    > div
    > div[style*="width: 54px"][style*="height: 54px"] {
    margin: 0 auto 18px !important;
    flex-shrink: 0;
  }

  /* Timeline title: better mobile readability */
  div[style*="grid-template-columns: repeat(7, 1fr)"]
    > div
    > div[style*="font-size: 10.5px"][style*="color: #B8D48A"] {
    font-size: 10px !important;
    margin-bottom: 10px !important;
  }

  /* Timeline description: mobile optimized */
  div[style*="grid-template-columns: repeat(7, 1fr)"]
    > div
    > div[style*="font-size: 12px"][style*="color: rgba(246,244,239,0.55)"] {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ─── PROJETOS SEÇÃO 8: Diferenciais (Mobile First ≤768px) ─── */
  /* Transform 2-column layout to single column, cards grid 2x4 to 1x8 */

  /* Main grid: 2 cols → 1 col, reduce gap */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Container padding: 0 84px → 0 20px (consistent with mobile standard) */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"] {
    & + div {
      /* Target parent section container */
    }
  }

  /* Section padding: reduce from 140px → 80px */
  section[style*="background: #FFFFFF"][style*="padding: 140px 0"] {
    padding: 80px 0 !important;
  }

  /* Container inside section: adjust padding */
  section[style*="background: #FFFFFF"][style*="padding: 140px 0"] .container {
    padding: 0 20px !important;
  }

  /* Cards grid: 2x2 → 1x8 (single column) */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Cards: adjust padding and spacing */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"] > div {
    padding: 20px 16px !important;
  }

  /* Card title (h4): 11px → 10px */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"] > div h4 {
    font-size: 10px !important;
    margin-bottom: 8px !important;
  }

  /* Card description (p): keep 13px, improve line-height */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"] > div p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* Left column title and content: optimize for mobile */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"]
    > div:first-child
    h2 {
    font-size: clamp(26px, 6vw, 36px) !important;
    margin-bottom: 18px !important;
  }

  /* Left column description: improve readability */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"]
    > div:first-child
    p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 32px !important;
  }

  /* Left column CTA button: full width on mobile */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"]
    > div:first-child
    a {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 15px 20px !important;
  }

  /* CONTATO */
  .section-contact {
  }
  .contact-grid {
  }
  .section-social {
    padding: 80px 0 !important;
  }
  .section-social > .container {
    padding: 0 20px !important;
  }
  .section-social > .container > div:first-child {
    margin-bottom: 48px !important;
  }
  .section-social h2 {
    font-size: clamp(28px, 5.5vw, 42px) !important;
  }
  .social-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .social-grid > a {
    padding: 24px 16px !important;
  }
  .social-grid > a > div:first-child {
    width: 44px !important;
    height: 44px !important;
  }
  .social-grid > a > div:first-child svg {
    width: 20px !important;
    height: 20px !important;
  }
  .social-grid > a > div:last-child > div:first-child {
    font-size: 12px !important;
    margin-bottom: 3px !important;
  }
  .social-grid > a > div:last-child > div:last-child {
    font-size: 10.5px !important;
  }
  .section-map {
    padding: 60px 0 !important;
  }
  .section-map > div {
    padding: 0 20px !important;
  }
  .map-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .map-grid > div:first-child h2 {
    font-size: clamp(32px, 5vw, 46px) !important;
    margin-bottom: 16px !important;
  }
  .map-grid > div:first-child > p {
    margin-bottom: 32px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"],
  .map-grid > div:first-child > a[style*="display: flex"] {
    gap: 14px !important;
    margin-bottom: 20px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"] > div:first-child,
  .map-grid > div:first-child > a[style*="display: flex"] > div:first-child {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"] > div:first-child svg,
  .map-grid > div:first-child > a[style*="display: flex"] > div:first-child svg {
    width: 16px !important;
    height: 16px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"] > div:last-child span,
  .map-grid > div:first-child > a[style*="display: flex"] > div:last-child span {
    font-size: 9.5px !important;
    margin-bottom: 4px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"] > div:last-child > div,
  .map-grid > div:first-child > a[style*="display: flex"] > div:last-child > div {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .map-grid > div:first-child > div[style*="background: #1D3318"] {
    border-radius: 14px !important;
    padding: 20px 18px !important;
    margin-bottom: 0 !important;
  }
  .map-grid > div:first-child > div[style*="background: #1D3318"] h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  .map-grid > div:first-child > div[style*="background: #1D3318"] p {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }
  .map-grid > div:first-child > div[style*="background: #1D3318"] a {
    padding: 12px 16px !important;
    font-size: 11px !important;
  }
  .map-grid > div:last-child {
    padding-bottom: 0 !important;
    padding-right: 0 !important;
  }
  .map-grid > div:last-child > div:nth-child(1),
  .map-grid > div:last-child > div:nth-child(2) {
    display: none !important;
  }
  .map-grid > div:last-child > div:nth-child(3) {
    position: relative !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
  }
  .map-grid > div:last-child > div:nth-child(3) > div {
    height: 300px !important;
  }
  /* ─── CONTATO SEÇÃO 4: Por que nos contatar (Mobile ≤768px) ─── */
  .section-reasons {
    padding: 60px 0 !important;
  }
  .section-reasons > .container {
    padding: 0 20px !important;
  }
  .section-reasons > .container > div:first-child {
    margin-bottom: 48px !important;
  }
  .section-reasons > .container > div:first-child h2 {
    font-size: clamp(28px, 5vw, 40px) !important;
  }
  .section-reasons > .container > div:first-child span {
    font-size: 9.5px !important;
    margin-bottom: 12px !important;
  }
  .reasons-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .reasons-grid > div {
    padding: 24px 18px !important;
    border-radius: 11px !important;
  }
  .reasons-grid > div > div:first-child {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .reasons-grid > div > div:first-child > div {
    width: 26px !important;
    height: 26px !important;
  }
  .reasons-grid > div > div:first-child > div svg {
    width: 11px !important;
    height: 11px !important;
  }
  .reasons-grid > div > div:first-child h3 {
    font-size: 16px !important;
  }
  .reasons-grid > div > p {
    font-size: 11.5px !important;
    line-height: 1.6 !important;
  }

  /* SHARED */
  .section-cta-dark {
    padding: 80px 0 !important;
  }
  .section-cta-dark > div {
    padding: 0 20px !important;
  }
  .section-cta-dark > div > div:first-child {
    margin-bottom: 20px !important;
  }
  .section-cta-dark h2 {
    font-size: clamp(28px, 5vw, 44px) !important;
    margin-bottom: 18px !important;
  }
  .section-cta-dark p {
    font-size: 13.5px !important;
    margin-bottom: 36px !important;
  }
  .section-cta-dark > div > div:last-child {
    gap: 10px !important;
  }
  .section-cta-dark a {
    padding: 13px 28px !important;
    font-size: 10px !important;
  }

  /* MODAL */
  .modal-overlay {
  }
  .modal {
  }
  .form-grid {
  }

  /* FOOTER */
  .footer {
    --footer-padding: 48px 0 28px;
    --footer-gap: 32px;
  }
  .footer-container {
    padding: 0 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
  .footer-desc {
    max-width: 100%;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* FIXED */
  .wa-fab {
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SMALL MOBILE  (≤ 480px)
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* DRAWER — aumenta largura em telas pequenas */
  .drawer {
    width: 100%;
  }

  /* NAV */
  .nav {
  }
  .nav-logo {
  }
  .nav-links {
  }

  /* HERO — pequenos ajustes finais para telas muito estreitas,
     mesmas regras/seletores do bloco mobile, apenas reduzindo escala. */
  .hero {
    min-height: 520px !important;
  }

  .hero-content {
    padding: 0 18px var(--hero-safe-area-bottom) !important;
  }

  .hero-inner h1 {
    font-size: clamp(27px, 9.2vw, 34px) !important;
  }

  .hero-inner p {
    font-size: 13.5px !important;
  }

  .hero-inner a {
    padding: 14px 20px !important;
    font-size: 11px !important;
  }

  .hero-wave {
  }

  /* ─── SPRINT SECTION 1 — refinamentos para small mobile (≤480px) ─── */

  .container {
    padding: 0 14px !important;
  }

  .section-services,
  .section-about,
  .section-what,
  .section-credentials,
  .section-process,
  .section-contact,
  .section-cta-dark {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .container h2 {
    font-size: clamp(20px, 7vw, 34px) !important;
  }

  .container h3 {
    font-size: 15px !important;
  }

  .container p {
    font-size: 13.5px !important;
  }

  .services-tabs a {
    padding: 8px 12px !important;
    font-size: 10px !important;
  }

  .service-grid {
    gap: 28px !important;
  }

  .service-panel {
    padding: 20px !important;
  }

  .stats-grid-4 > div {
    padding: 24px 14px !important;
  }

  .svc-card {
    padding: 18px !important;
  }

  /* ─── SOBRE SEÇÃO 3: O Que Fazemos (Small Mobile) ─── */
  .section-what > .container > div:first-child {
    margin-bottom: 40px !important;
  }

  .services-grid-4 {
    gap: 20px !important;
  }

  .services-grid-4 > div {
    padding: 20px 16px !important;
  }

  .services-grid-4 > div h3 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  .services-grid-4 > div p {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }

  .services-grid-4 > div svg {
    margin: 0 auto 14px !important;
  }

  /* ─── SOBRE SEÇÃO 4: Como Trabalhamos (Small Mobile) ─── */
  .section-process > .container > div:first-child {
    margin-bottom: 40px !important;
  }

  .process-steps {
    gap: 12px !important;
  }

  .process-steps > div {
    padding: 20px 16px !important;
  }

  .process-steps > div > div:nth-child(2) {
    font-size: 32px !important;
    margin-bottom: 10px !important;
  }

  .process-steps > div h3 {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .process-steps > div p {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  /* ─── HOME SEÇÃO 4: Nosso Processo (Small Mobile) ─── */

  /* Círculos numerados: reduzir ligeiramente em telas muito pequenas */
  .process-steps > div > div:first-child:not([style*="position: absolute"]) {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 12px !important;
  }

  /* Ícone SVG dentro do círculo (último passo — Acompanhamento) */
  .process-steps
    > div
    > div:first-child:not([style*="position: absolute"])
    svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Título do passo */
  .process-steps > div > div:nth-child(2)[style*="text-transform: uppercase"] {
    font-size: 10.5px !important;
  }

  /* Descrição do passo */
  .process-steps > div > div:nth-child(3) {
    font-size: 11.5px !important;
  }

  /* ─── HOME SEÇÃO 5: Diferenciais (Small Mobile) ─── */
  .section-diff {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-diff > .container {
    padding: 0 14px !important;
  }

  .section-header-row {
    margin-bottom: 32px !important;
  }

  .section-header-row > div:first-child h2 {
    font-size: clamp(18px, 5.5vw, 28px) !important;
  }

  .section-header-row > a {
    font-size: 9px !important;
    padding: 11px 14px !important;
  }

  .diff-grid {
    gap: 16px !important;
  }

  .diff-card {
    padding: 18px 12px !important;
  }

  .diff-card > div[style*="width: 44px"] {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 10px !important;
  }

  .diff-card > div[style*="width: 44px"] svg {
    width: 16px !important;
    height: 16px !important;
  }

  .diff-card h3 {
    font-size: 14px !important;
  }

  .diff-card p {
    font-size: 11px !important;
  }

  /* ─── SOBRE SEÇÃO 5: Por que escolher a AgroVisão (Small Mobile ≤480px) ─── */
  .diff-sticky-grid {
    gap: 24px !important;
  }

  .diff-grid-2 {
    gap: 20px !important;
  }

  .diff-grid-2 > div {
    padding: 20px 0 !important;
  }

  /* ─── SOBRE SEÇÃO 6: Nossa Experiência em Campo (Small Mobile) ─── */
  .section-gallery > div:first-child {
    padding: 48px 14px 0 !important;
  }

  .section-gallery > div:last-child {
    padding: 0 14px 48px !important;
  }

  .section-gallery > div:first-child > div {
    margin-bottom: 24px !important;
  }

  .gallery-grid {
    gap: 2px !important;
  }

  .gallery-grid > div {
    min-height: 220px !important;
  }

  .gallery-grid > div[style*="flex-direction: column"] > div {
    min-height: 160px !important;
  }

  /* ─── SERVIÇOS: Tabs — Refinement Small Mobile (≤480px) ─── */
  .services-nav {
    padding-top: 40px !important;
    padding-bottom: 28px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(49, 91, 44, 0.08) !important;
  }

  .services-nav > .container {
    padding: 0 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section.services-nav > div.container {
    padding: 0 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .services-tabs {
    flex-direction: column !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }

  .services-tabs a {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    white-space: normal !important;
    flex-shrink: 1 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #E8E8E8 !important;
    transition:
      background 0.2s,
      color 0.2s !important;
    text-align: left !important;
  }

  .services-tabs a:hover {
    background: rgba(49, 91, 44, 0.06) !important;
  }

  .service-grid {
  }
  .service-grid--reverse {
  }
  .service-panel {
  }
  .service-panel--white {
  }

  /* PROJETOS */
  .section-credentials {
  }
  .stats-grid-4 {
  }
  .credentials-strip {
  }
  .section-editorial {
  }
  .editorial-grid {
  }

  /* ─── SPRINT SECTION 3 — refinamentos para small mobile (≤480px) ─── */
  .section-categories {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-categories > .container > div:first-child {
    margin-bottom: 40px !important;
  }

  .section-categories > .container > div:first-child > div > span {
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
  }

  .section-categories > .container > div:first-child h2 {
    font-size: clamp(20px, 7vw, 34px) !important;
    margin-bottom: 10px !important;
  }

  .section-categories > .container > div:first-child p {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
  }

  .categories-grid {
    gap: 14px !important;
  }

  .cat-card {
    padding: 20px 14px !important;
  }

  .cat-card > div[style*="width: 52px"] {
    width: 44px !important;
    height: 44px !important;
    margin: 0 auto 12px !important;
  }

  .cat-card h3 {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  /* ─── PROJETOS SEÇÃO 4: refinamentos para small mobile (≤480px) ─── */
  .section-categories + section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-categories + section .container > div:first-child {
    margin-bottom: 28px !important;
  }

  .section-categories
    + section
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 80px"] {
    gap: 22px !important;
    margin-bottom: 44px !important;
  }

  .section-logos {
  }
  .logos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .logo-card {
    padding: 16px 10px !important;
    gap: 8px !important;
  }

  .logo-card img {
    max-height: 44px !important;
  }

  .logo-card > div:last-child > div:first-child {
    font-size: 10px !important;
  }

  .logo-card > div:last-child > div:last-child {
    font-size: 7px !important;
  }

  /* ─── PROJETOS SEÇÃO 7: Nossa Metodologia (Small Mobile ≤480px) ─── */
  /* Maintain single column, tighter spacing for small screens */
  div[style*="grid-template-columns: repeat(7, 1fr)"] {
    gap: 20px !important;
  }

  /* Timeline step card: compact padding for small mobile */
  div[style*="grid-template-columns: repeat(7, 1fr)"] > div {
    padding: 20px 16px !important;
  }

  /* Timeline circle: slightly smaller to fit compact layout */
  div[style*="grid-template-columns: repeat(7, 1fr)"]
    > div
    > div[style*="width: 54px"][style*="height: 54px"] {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 16px !important;
  }

  /* Timeline circle number: scale with circle */
  div[style*="grid-template-columns: repeat(7, 1fr)"]
    > div
    > div[style*="width: 54px"]
    span[style*="font-size: 20px"] {
    font-size: 18px !important;
  }

  /* Timeline title: extra tight for small mobile */
  div[style*="grid-template-columns: repeat(7, 1fr)"]
    > div
    > div[style*="font-size: 10.5px"][style*="color: #B8D48A"] {
    font-size: 9px !important;
    margin-bottom: 8px !important;
  }

  /* Timeline description: compact for small mobile */
  div[style*="grid-template-columns: repeat(7, 1fr)"]
    > div
    > div[style*="font-size: 12px"][style*="color: rgba(246,244,239,0.55)"] {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* ─── PROJETOS SEÇÃO 8: Diferenciais (Small Mobile ≤480px) ─── */
  /* Maintain single column with tighter spacing for small screens */

  /* Main grid: keep 1 col, tighten gap further */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"] {
    gap: 32px !important;
  }

  /* Section padding: even more compact */
  section[style*="background: #FFFFFF"][style*="padding: 140px 0"] {
    padding: 60px 0 !important;
  }

  /* Cards grid: keep 1 col, reduce gap */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"] {
    gap: 12px !important;
  }

  /* Cards: compact padding */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"] > div {
    padding: 16px 14px !important;
  }

  /* Card title (h4): 10px → 9px */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"] > div h4 {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }

  /* Card description (p): 13px → 12px */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2px"] > div p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Left column title: reduce size for small mobile */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"]
    > div:first-child
    h2 {
    font-size: clamp(22px, 5.2vw, 28px) !important;
    margin-bottom: 16px !important;
  }

  /* Left column description: tighter spacing */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 100px"]
    > div:first-child
    p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }

  /* CONTATO */
  .section-contact {
  }
  .contact-grid {
  }
  .section-social {
    padding: 60px 0 !important;
  }
  .section-social > .container {
    padding: 0 16px !important;
  }
  .section-social > .container > div:first-child {
    margin-bottom: 40px !important;
  }
  .section-social h2 {
    font-size: clamp(24px, 5vw, 32px) !important;
  }
  .social-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .social-grid > a {
    padding: 20px 14px !important;
  }
  .social-grid > a > div:first-child {
    width: 40px !important;
    height: 40px !important;
  }
  .social-grid > a > div:first-child svg {
    width: 18px !important;
    height: 18px !important;
  }
  .social-grid > a > div:last-child > div:first-child {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
  .social-grid > a > div:last-child > div:last-child {
    font-size: 9.5px !important;
  }
  .section-map {
    padding: 50px 0 !important;
  }
  .section-map > div {
    padding: 0 16px !important;
  }
  .map-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .map-grid > div:first-child h2 {
    font-size: clamp(24px, 4vw, 32px) !important;
    margin-bottom: 12px !important;
  }
  .map-grid > div:first-child > p {
    margin-bottom: 28px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"],
  .map-grid > div:first-child > a[style*="display: flex"] {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"] > div:first-child,
  .map-grid > div:first-child > a[style*="display: flex"] > div:first-child {
    width: 36px !important;
    height: 36px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"] > div:first-child svg,
  .map-grid > div:first-child > a[style*="display: flex"] > div:first-child svg {
    width: 15px !important;
    height: 15px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"] > div:last-child span,
  .map-grid > div:first-child > a[style*="display: flex"] > div:last-child span {
    font-size: 9px !important;
    margin-bottom: 3px !important;
  }
  .map-grid > div:first-child > div[style*="display: flex"] > div:last-child > div,
  .map-grid > div:first-child > a[style*="display: flex"] > div:last-child > div {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .map-grid > div:first-child > div[style*="background: #1D3318"] {
    border-radius: 12px !important;
    padding: 16px 14px !important;
    margin-bottom: 0 !important;
  }
  .map-grid > div:first-child > div[style*="background: #1D3318"] h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  .map-grid > div:first-child > div[style*="background: #1D3318"] p {
    font-size: 11px !important;
    margin-bottom: 14px !important;
  }
  .map-grid > div:first-child > div[style*="background: #1D3318"] a {
    padding: 10px 14px !important;
    font-size: 10px !important;
  }
  .map-grid > div:last-child {
    padding-bottom: 0 !important;
    padding-right: 0 !important;
  }
  .map-grid > div:last-child > div:nth-child(1),
  .map-grid > div:last-child > div:nth-child(2) {
    display: none !important;
  }
  .map-grid > div:last-child > div:nth-child(3) {
    position: relative !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
  }
  .map-grid > div:last-child > div:nth-child(3) > div {
    height: 220px !important;
  }
  /* ─── CONTATO SEÇÃO 4: Por que nos contatar (Small Mobile ≤480px) ─── */
  .section-reasons {
    padding: 50px 0 !important;
  }
  .section-reasons > .container {
    padding: 0 16px !important;
  }
  .section-reasons > .container > div:first-child {
    margin-bottom: 40px !important;
  }
  .section-reasons > .container > div:first-child h2 {
    font-size: clamp(22px, 4vw, 32px) !important;
  }
  .section-reasons > .container > div:first-child span {
    font-size: 9px !important;
    margin-bottom: 10px !important;
  }
  .reasons-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .reasons-grid > div {
    padding: 20px 16px !important;
    border-radius: 10px !important;
  }
  .reasons-grid > div > div:first-child {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .reasons-grid > div > div:first-child > div {
    width: 24px !important;
    height: 24px !important;
  }
  .reasons-grid > div > div:first-child > div svg {
    width: 10px !important;
    height: 10px !important;
  }
  .reasons-grid > div > div:first-child h3 {
    font-size: 15px !important;
  }
  .reasons-grid > div > p {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  /* SHARED */
  .section-cta-dark {
    padding: 60px 0 !important;
  }
  .section-cta-dark > div {
    padding: 0 16px !important;
  }
  .section-cta-dark > div > div:first-child {
    margin-bottom: 18px !important;
  }
  .section-cta-dark h2 {
    font-size: clamp(22px, 4vw, 36px) !important;
    margin-bottom: 16px !important;
  }
  .section-cta-dark p {
    font-size: 13px !important;
    margin-bottom: 32px !important;
  }
  .section-cta-dark > div > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .section-cta-dark a {
    width: 100% !important;
    padding: 12px 24px !important;
    font-size: 10px !important;
  }

  /* MODAL */
  .modal-overlay {
  }
  .modal {
  }
  .form-grid {
  }

  /* FOOTER */
  .footer {
    --footer-padding: 40px 0 24px;
    --footer-gap: 28px;
  }
  .footer-container {
    padding: 0 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 28px;
  }
  .footer-social {
    flex-wrap: wrap;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .footer-meta {
    font-size: 11px;
  }

  /* FIXED */
  .wa-fab {
  }
}