/* Trava geral contra rolagem horizontal indevida no mobile — nenhuma
   seção do site tem conteúdo que precise rolar de lado a lado, então
   qualquer elemento que vaze da viewport (diagramas de largura fixa,
   animações de entrada lateral etc.) fica simplesmente cortado em vez
   de abrir uma barra de rolagem horizontal na página inteira. */
html,
body {
  overflow-x: hidden;
}

/* Padrão de colmeia compartilhado por todas as seções verde-escuras. */
@keyframes colmy-amber-flow {
  0% {
    background-position: 0% 45%;
  }

  50% {
    background-position: 100% 56%;
  }

  100% {
    background-position: 0% 45%;
  }
}

@keyframes colmy-campaign-amber-flow {
  0% {
    background-position: 0 0, 0% 45%;
  }

  50% {
    background-position: 18px 10px, 100% 56%;
  }

  100% {
    background-position: 0 0, 0% 45%;
  }
}

/*
 * Substitui os antigos fundos verdes pelo gradiente institucional âmbar.
 * Os IDs cobrem as páginas PDV/ERP, cujos fundos são definidos fora das
 * classes utilitárias do HTML.
 */
.brand-page main section.bg-hub-navy,
.brand-page main section.amber-gradient-section,
.brand-page:not(.page-camp) main > section:first-child,
.brand-page:not(.page-camp) main > div > section:first-child,
.brand-page main section#inline-catalogo-3,
.brand-page main section#inline-pdv-3,
.brand-page main section#inline-pdv-33,
.brand-page main section#inline-pdv-69,
.brand-page main section#inline-pdv-108,
.brand-page main section#inline-erp-3,
.brand-page main section#inline-erp-33,
.brand-page main section#inline-erp-95,
.brand-page main section#inline-erp-129,
.brand-page main section > div.bg-hub-navy,
.brand-page .hex-pattern-surface {
  background-color: #e58a08 !important;
  background-image: linear-gradient(125deg,
      #f4b21b 0%,
      #efa015 26%,
      #e88d0b 52%,
      #d97605 76%,
      #f1a716 100%) !important;
  background-size: 320% 320% !important;
  animation: colmy-amber-flow 18s ease-in-out infinite;
  color: #ffffff;
}

/* Classe explícita para componentes que ainda possuem regras antigas por ID. */
.brand-page main section.amber-gradient-section {
  background: linear-gradient(125deg,
      #f4b21b 0%,
      #efa015 26%,
      #e88d0b 52%,
      #d97605 76%,
      #f1a716 100%) !important;
  background-size: 320% 320% !important;
  animation: colmy-amber-flow 18s ease-in-out infinite !important;
}

/* Mesma identidade nas três landing pages de campanha. */
.campaign-catalogo1 :is(.hero, .intermediate, .benefits, .process, .cost, .faq),
.campaign-catalogo2 :is(.solution, .timeline, .cta),
.campaign-catalogo3 :is(.hero-section, #solucao, #comparativo) {
  background-color: #e58a08 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.34' stroke-width='1'%3E%3Cpath d='M45 1 1 26v52l44 25 44-25V26L45 1Zm90 0L91 26v52l44 25 44-25V26L135 1ZM90 53 46 78v52l44 25 44-25V78L90 53Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(125deg, #f4b21b 0%, #efa015 26%, #e88d0b 52%, #d97605 76%, #f1a716 100%) !important;
  background-repeat: repeat, no-repeat !important;
  background-size: 180px 156px, 320% 320% !important;
  animation: colmy-campaign-amber-flow 18s ease-in-out infinite;
  color: #ffffff;
}

/* A campanha 2 desenha o fundo da Hero em um pseudoelemento. */
.campaign-catalogo2 .hero::before {
  background-color: #e58a08 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.34' stroke-width='1'%3E%3Cpath d='M45 1 1 26v52l44 25 44-25V26L45 1Zm90 0L91 26v52l44 25 44-25V26L135 1ZM90 53 46 78v52l44 25 44-25V78L90 53Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(125deg, #f4b21b 0%, #efa015 26%, #e88d0b 52%, #d97605 76%, #f1a716 100%) !important;
  background-repeat: repeat, no-repeat !important;
  background-size: 180px 156px, 320% 320% !important;
  animation: colmy-campaign-amber-flow 18s ease-in-out infinite;
}

.brand-page section {
  isolation: isolate;
}

.brand-page section > .hex-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15 !important;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.58' stroke-width='1'%3E%3Cpath d='M45 1 1 26v52l44 25 44-25V26L45 1Zm90 0L91 26v52l44 25 44-25V26L135 1ZM90 53 46 78v52l44 25 44-25V78L90 53Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center top;
  background-size: 180px 156px;
}

.brand-page section > .hex-pattern ~ * {
  position: relative;
  z-index: 1;
}

/* Variante para blocos verdes aninhados dentro de uma seção clara. */
.brand-page .hex-pattern-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.brand-page .hex-pattern-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='156' viewBox='0 0 180 156'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.58' stroke-width='1'%3E%3Cpath d='M45 1 1 26v52l44 25 44-25V26L45 1Zm90 0L91 26v52l44 25 44-25V26L135 1ZM90 53 46 78v52l44 25 44-25V78L90 53Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center top;
  background-size: 180px 156px;
}

.brand-page .hex-pattern-surface > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .brand-page section > .hex-pattern {
    background-size: 144px 125px;
  }

  .brand-page .hex-pattern-surface::before {
    background-size: 144px 125px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-page main section.bg-hub-navy,
  .brand-page:not(.page-camp) main > section:first-child,
  .brand-page:not(.page-camp) main > div > section:first-child,
  .brand-page main section[id^="inline-pdv-"],
  .brand-page main section[id^="inline-erp-"],
  .brand-page main section#inline-catalogo-3,
  .brand-page main section > div.bg-hub-navy,
  .brand-page .hex-pattern-surface {
    animation: none;
    background-position: 50% 50%;
  }

  .campaign-catalogo1 :is(.hero, .intermediate, .benefits, .process, .cost, .faq),
  .campaign-catalogo2 :is(.solution, .timeline, .cta),
  .campaign-catalogo3 :is(.hero-section, #solucao, #comparativo) {
    animation: none;
    background-position: 0 0, 50% 50%;
  }

  .campaign-catalogo2 .hero::before {
    animation: none;
    background-position: 0 0, 50% 50%;
  }

  .brand-page section > .hex-pattern {
    background-attachment: scroll;
  }
}

/* ==========================================================================
   Padrão único de card para todo o ecossistema (todas as páginas):
   profundidade (sombra), borda colorida e hover flutuante + leve crescimento.
   Aplicado via class="hub-card" nos containers de card — não altera
   tamanho, padding ou estrutura interna, só a "pele" visual + interação.
   ========================================================================== */
.hub-card {
  /* Fundo claro (padrão): borda escura */
  border: 1.5px solid rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 8px 24px rgba(19, 37, 36, 0.08) !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease !important;
  will-change: transform;
}

.hub-card:hover {
  transform: translateY(-8px) scale(1.03) !important;
  border-color: rgba(15, 23, 42, 0.4) !important;
  box-shadow: 0 20px 40px rgba(19, 37, 36, 0.16) !important;
}

/* Fundo laranja/âmbar (mesmas seções que recebem o gradiente institucional): borda branca */
.brand-page main section.bg-hub-navy .hub-card,
.brand-page main section.amber-gradient-section .hub-card,
.brand-page:not(.page-camp) main > section:first-child .hub-card,
.brand-page:not(.page-camp) main > div > section:first-child .hub-card,
.brand-page main section#inline-catalogo-3 .hub-card,
.brand-page main section#inline-pdv-3 .hub-card,
.brand-page main section#inline-pdv-33 .hub-card,
.brand-page main section#inline-pdv-69 .hub-card,
.brand-page main section#inline-pdv-108 .hub-card,
.brand-page main section#inline-erp-3 .hub-card,
.brand-page main section#inline-erp-33 .hub-card,
.brand-page main section#inline-erp-95 .hub-card,
.brand-page main section#inline-erp-129 .hub-card,
.brand-page main section > div.bg-hub-navy .hub-card,
.brand-page .hex-pattern-surface .hub-card {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.brand-page main section.bg-hub-navy .hub-card:hover,
.brand-page main section.amber-gradient-section .hub-card:hover,
.brand-page:not(.page-camp) main > section:first-child .hub-card:hover,
.brand-page:not(.page-camp) main > div > section:first-child .hub-card:hover,
.brand-page main section#inline-catalogo-3 .hub-card:hover,
.brand-page main section#inline-pdv-3 .hub-card:hover,
.brand-page main section#inline-pdv-33 .hub-card:hover,
.brand-page main section#inline-pdv-69 .hub-card:hover,
.brand-page main section#inline-pdv-108 .hub-card:hover,
.brand-page main section#inline-erp-3 .hub-card:hover,
.brand-page main section#inline-erp-33 .hub-card:hover,
.brand-page main section#inline-erp-95 .hub-card:hover,
.brand-page main section#inline-erp-129 .hub-card:hover,
.brand-page main section > div.bg-hub-navy .hub-card:hover,
.brand-page .hex-pattern-surface .hub-card:hover {
  border-color: rgba(255, 255, 255, 0.75) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hub-card {
    transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
  }
  .hub-card:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Regra global: qualquer texto em --hub-coral (âmbar-escuro) ou --hub-blue
   (na verdade um verde/teal — nome legado) some de contraste sobre o
   próprio fundo laranja/âmbar institucional. Nessas seções (mesma lista
   usada pelo fundo âmbar acima) o texto vira branco — eliminando essa
   combinação de cor de fonte dos fundos laranja em todo o projeto.
   ========================================================================== */
.brand-page main section.bg-hub-navy :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section.amber-gradient-section :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page:not(.page-camp) main > section:first-child :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page:not(.page-camp) main > div > section:first-child :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-catalogo-3 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-pdv-3 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-pdv-33 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-pdv-69 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-pdv-108 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-erp-3 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-erp-33 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-erp-95 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section#inline-erp-129 :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page main section > div.bg-hub-navy :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.brand-page .hex-pattern-surface :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.campaign-catalogo1 :is(.hero, .intermediate, .benefits, .process, .cost, .faq) :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.campaign-catalogo2 :is(.solution, .timeline, .cta) :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80),
.campaign-catalogo3 :is(.hero-section, #solucao, #comparativo) :is(.text-hub-coral, .text-hub-blue, .text-hub-blue\/80) {
  color: #ffffff !important;
}

/* ==========================================================================
   Chegada direcional — regra geral, todas as páginas.
   Some junto de "hub-reveal"/"reveal"/"animate-fade-up" (que cuidam do
   fade + sobe de baixo por padrão): adicione -left ou -right para o
   elemento entrar do lado, "encaixando" no lugar — útil pra pares
   lado-a-lado (esquerda vem da esquerda, direita vem da direita,
   convergindo pro centro) em vez de todo mundo subir igual.
   ========================================================================== */
.hub-reveal-left,
.reveal-left,
.animate-fade-up-left {
  transform: translate3d(-56px, 16px, 0);
}

.hub-reveal-left.in,
.reveal-left.is-visible,
.animate-fade-up-left.visible {
  transform: translate3d(0, 0, 0);
}

.hub-reveal-right,
.reveal-right,
.animate-fade-up-right {
  transform: translate3d(56px, 16px, 0);
}

.hub-reveal-right.in,
.reveal-right.is-visible,
.animate-fade-up-right.visible {
  transform: translate3d(0, 0, 0);
}

/* Em telas estreitas 56px de deslocamento lateral empurra o elemento
   pra fora da viewport (o container já ocupa quase 100% da largura) —
   isso criava rolagem horizontal indevida no mobile. Reduz o desvio. */
@media (max-width: 640px) {
  .hub-reveal-left,
  .reveal-left,
  .animate-fade-up-left {
    transform: translate3d(-18px, 16px, 0);
  }

  .hub-reveal-right,
  .reveal-right,
  .animate-fade-up-right {
    transform: translate3d(18px, 16px, 0);
  }
}