/*
Theme Name:   EcoAm
Theme URI:    https://ecoamamazonia.com
Description:  Tema filho do Hello Elementor para o site EcoAm - Bioeconomia na Amazônia. Contém os tokens de design (cores, tipografia, espaçamento), os estados de interação e os tipos de conteúdo do projeto.
Author:       Ocamaz
Author URI:   https://ocamaz.com.br
Template:     hello-elementor
Version:      1.9.0
Text Domain:  ecoam
*/

/* ==========================================================================
   1. TOKENS
   Fonte: layout_site_ATUALIZADO.pdf
   ========================================================================== */

:root {

  /* --- Paleta institucional -------------------------------------------- */
  --ecoam-marrom:        #7C432F;
  --ecoam-laranja:       #C55626;
  --ecoam-areia:         #C3A36A;
  --ecoam-terracota:     #9D372F;
  --ecoam-vermelho:      #B81D1D;
  --ecoam-verde:         #2C7A35;
  --ecoam-oliva:         #566121;
  --ecoam-oliva-claro:   #60792B;
  --ecoam-azul:          #2D4983;
  --ecoam-azul-claro:    #30819D;
  --ecoam-cinza-azul:    #869FA9;
  --ecoam-amarelo:       #EFC64D;

  /* --- Papéis semânticos ------------------------------------------------
     Trocar aqui muda o site inteiro. Nunca usar hex direto no CSS.        */
  --cor-acao:            var(--ecoam-laranja);   /* botões, CTAs           */
  --cor-acao-hover:      #A8451C;                /* laranja 12% mais escuro */
  --cor-acao-ativo:      #8E3A17;
  --cor-institucional:   var(--ecoam-verde);
  --cor-link:            var(--ecoam-verde);
  --cor-link-hover:      var(--ecoam-laranja);
  --cor-texto:           #2E241D;
  --cor-texto-suave:     #5A4A40;
  --cor-fundo:           #FFFFFF;
  --cor-fundo-alt:       #F7F3EC;
  --cor-borda:           #E2D9CC;
  --cor-foco:            var(--ecoam-azul-claro);

  /* --- Tipografia -------------------------------------------------------
     Passion One = títulos | Google Sans Flex = corpo                      */
  --fonte-titulo: "Passion One", "Arial Black", sans-serif;
  --fonte-corpo:  "Google Sans Flex", "Google Sans", system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;

  --txt-xs:   0.8125rem;  /* 13px - legendas          */
  --txt-sm:   0.9375rem;  /* 15px - apoio             */
  --txt-base: 1.0625rem;  /* 17px - corpo             */
  --txt-lg:   1.25rem;    /* 20px - destaque          */
  --txt-xl:   1.75rem;    /* 28px - h3                */
  --txt-2xl:  2.5rem;     /* 40px - h2                */
  --txt-3xl:  3.5rem;     /* 56px - h1                */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;

  --altura-titulo: 1.1;
  --altura-corpo:  1.6;

  /* --- Espaçamento (escala de 8px) -------------------------------------- */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2rem;
  --esp-6: 3rem;
  --esp-8: 4rem;
  --esp-12: 6rem;

  /* --- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --raio-sm: 8px;
  --raio-md: 16px;
  --raio-lg: 28px;

  /* --- Movimento ---------------------------------------------------------
     Um único padrão para todo o site.                                     */
  --transicao: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Elevação ----------------------------------------------------------- */
  --sombra-sm: 0 2px 8px -2px rgba(46, 36, 29, 0.12);
  --sombra-md: 0 8px 24px -8px rgba(46, 36, 29, 0.18);
  --sombra-lg: 0 18px 40px -22px rgba(44, 122, 53, 0.40);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  line-height: var(--altura-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulo);
  line-height: var(--altura-titulo);
  font-weight: var(--peso-bold);
  color: var(--ecoam-marrom);
}

h1 { font-size: var(--txt-3xl); }
h2 { font-size: var(--txt-2xl); }
h3 { font-size: var(--txt-xl); }

/* ==========================================================================
   3. ESTADOS DE INTERAÇÃO
   Esta seção resolve a pendência apontada no briefing:
   comportamento de links, botões e cards.
   ========================================================================== */

/* --- Links de conteúdo -------------------------------------------------- */

a {
  color: var(--cor-link);
  text-decoration: none;
  transition: color var(--transicao);
}

/* Sublinhado que cresce da esquerda, só em links dentro de texto corrido */
.entry-content a:not(.btn):not(.elementor-button) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--transicao), color var(--transicao);
}

.entry-content a:not(.btn):not(.elementor-button):hover {
  color: var(--cor-link-hover);
  background-size: 100% 1px;
}

a:active { color: var(--cor-acao-ativo); }

/* Foco visível — obrigatório para navegação por teclado (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Botões -------------------------------------------------------------- */

.btn,
.elementor-button,
button:not(.elementor-menu-toggle),
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  min-height: 48px;              /* área de toque mínima em mobile */
  padding: 0.875rem 1.75rem;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-sm);
  font-weight: var(--peso-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  background: var(--cor-acao);
  border: 2px solid transparent;
  border-radius: var(--raio-sm);
  cursor: pointer;
  transition: background-color var(--transicao),
              transform var(--transicao),
              box-shadow var(--transicao);
}

.btn:hover,
.elementor-button:hover,
button:not(.elementor-menu-toggle):hover,
input[type="submit"]:hover {
  background: var(--cor-acao-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}

.btn:active,
.elementor-button:active,
button:not(.elementor-menu-toggle):active {
  background: var(--cor-acao-ativo);
  transform: translateY(0);
  box-shadow: none;
}

.btn:disabled,
button:disabled,
input[type="submit"]:disabled {
  background: var(--ecoam-cinza-azul);
  color: #FFFFFF;
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}

/* --- Botão de contorno ---------------------------------------------------
   Definição do cliente: no hover, preenche com a cor da borda e o texto
   passa a branco. Serve para o "Saiba mais" da home.

   A cor da borda é uma variável própria: assim o mesmo botão pode
   aparecer em laranja, verde ou qualquer cor da paleta, bastando
   trocar --contorno na instância.

   O Elementor aplica as classes personalizadas no contêiner do widget e
   não no <a>, por isso cada seletor aparece em duas formas: aplicada ao
   próprio elemento e aplicada a um ancestral.                           */

.btn--contorno,
.btn--contorno .elementor-button,
.btn--contorno a.elementor-button {
  --contorno: var(--cor-acao);
  background: transparent !important;
  color: var(--contorno) !important;
  border: 2px solid var(--contorno) !important;
  fill: var(--contorno);
  transition: background-color var(--transicao),
              color var(--transicao),
              border-color var(--transicao);
}

/* O contêiner do widget não deve ganhar aparência de botão. */
.elementor-widget-button.btn--contorno {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto;
}

.btn--contorno:hover,
.btn--contorno:focus-visible,
.btn--contorno .elementor-button:hover,
.btn--contorno .elementor-button:focus-visible,
.btn--contorno a.elementor-button:hover,
.btn--contorno a.elementor-button:focus-visible {
  background: var(--contorno) !important;
  color: #FFFFFF !important;
  border-color: var(--contorno) !important;
}

/* O contêiner não muda no hover; quem muda é o botão dentro dele. */
.elementor-widget-button.btn--contorno:hover {
  background: transparent !important;
}

.btn--contorno:active,
.btn--contorno .elementor-button:active {
  filter: brightness(0.9);
}

/* Variações de cor. A variável fica no contêiner e é herdada pelo <a>. */
.btn--contorno.is-verde,
.btn--contorno.is-verde .elementor-button  { --contorno: var(--cor-institucional); }

.btn--contorno.is-marrom,
.btn--contorno.is-marrom .elementor-button { --contorno: var(--ecoam-marrom); }

.btn--contorno.is-branco,
.btn--contorno.is-branco .elementor-button {
  --contorno: #FFFFFF;
  color: #FFFFFF !important;
}

.btn--contorno.is-branco:hover,
.btn--contorno.is-branco .elementor-button:hover {
  background: #FFFFFF !important;
  color: var(--cor-institucional) !important;
}

/* --- Mapa interativo (seção 5) -------------------------------------------
   Base em azul claro, territórios em azul escuro, amarelo no hover.
   Os estados ficam aqui para que o SVG só precise das classes.           */

.ecoam-mapa {
  width: 100%;
  height: auto;
}

/* Estados dos territórios dentro do SVG. */
.ecoam-mapa .territorio {
  fill: var(--ecoam-azul);
  stroke: #FFFFFF;
  stroke-width: 1;
  cursor: pointer;
  transition: fill var(--transicao);
}

.ecoam-mapa .territorio:hover,
.ecoam-mapa .territorio:focus-visible,
.ecoam-mapa .territorio.is-ativo {
  fill: var(--ecoam-amarelo);
  outline: none;
}

/* Área do mapa que não é território. */
.ecoam-mapa .base {
  fill: var(--ecoam-azul-claro);
  stroke: #FFFFFF;
  stroke-width: 1;
  pointer-events: none;
}

/* Balão de informações. */
.ecoam-balao {
  position: absolute;
  z-index: 20;
  min-width: 240px;
  max-width: 300px;
  padding: var(--esp-2);
  background: #FFFFFF;
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transicao),
              transform var(--transicao),
              visibility var(--transicao);
  pointer-events: none;
}

.ecoam-balao.is-visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ecoam-balao__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xl);
  color: var(--ecoam-marrom);
  margin-bottom: var(--esp-1);
}

.ecoam-balao__dado {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  border-top: 1px solid var(--cor-borda);
}

.ecoam-balao__valor {
  font-weight: var(--peso-bold);
  font-size: var(--txt-lg);
  color: var(--cor-institucional);
  line-height: 1.2;
}

.ecoam-balao__rotulo {
  font-size: var(--txt-xs);
  color: var(--cor-texto-suave);
}

/* Estado de carregamento */
.btn.is-carregando {
  pointer-events: none;
  opacity: 0.7;
}

.btn.is-carregando::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ecoam-girar 700ms linear infinite;
}

@keyframes ecoam-girar {
  to { transform: rotate(360deg); }
}

/* --- Cards ---------------------------------------------------------------
   Usado em notícias, negócios, territórios e mini docs.                   */

.ecoam-card {
  display: block;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: transform var(--transicao),
              box-shadow var(--transicao),
              border-color var(--transicao);
}

.ecoam-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-md);
  border-color: var(--cor-acao);
}

.ecoam-card:active { transform: translateY(-1px); }

.ecoam-card img {
  transition: transform var(--transicao);
}

.ecoam-card:hover img {
  transform: scale(1.04);
}

/* --- Logos de negócios (seção 7) ---------------------------------------
   Cinza em repouso, colorido no hover — padrão do Lab de Impacto.        */

.ecoam-logo-negocio img {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter var(--transicao), opacity var(--transicao);
}

.ecoam-logo-negocio:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* --- Menu ----------------------------------------------------------------
   Definição do cliente: no hover o item fica em negrito, mantendo a cor.

   Trocar font-weight de verdade mudaria a largura do texto e os itens
   vizinhos se deslocariam sob o cursor. A solução é engrossar as letras
   com text-shadow em vez de trocar o peso: o resultado é visualmente
   equivalente a um negrito e não altera o espaço ocupado.               */

.ecoam-menu a {
  color: var(--cor-texto);
  font-weight: var(--peso-medio);
  padding: var(--esp-1) 0;
  transition: text-shadow var(--transicao);
}

.ecoam-menu a:hover,
.ecoam-menu a:focus-visible,
.ecoam-menu .current-menu-item > a,
.ecoam-menu .current-menu-ancestor > a {
  text-shadow:
     0.35px 0 0 currentColor,
    -0.35px 0 0 currentColor;
}

/* --- Busca expansível ----------------------------------------------------
   Em repouso ocupa apenas o espaço do ícone. Ao abrir, o campo cresce
   para a esquerda a partir do botão. A largura é animada em vez de
   display, para que a transição seja suave.                             */

/* O Elementor dá largura total ao contêiner do shortcode; aqui o widget
   deve ocupar somente o necessário.

   O seletor :has() resolve automaticamente, mas não existe em navegadores
   antigos. Para esses, basta adicionar a classe ecoam-widget-busca no
   próprio widget, em Avançado > Classes CSS. */
.elementor-widget-shortcode:has( .ecoam-busca ),
.ecoam-widget-busca,
.ecoam-widget-busca .elementor-widget-container,
.ecoam-busca {
  width: auto;
  display: inline-flex;
  align-items: center;
}

.ecoam-busca {
  /* Expande para a esquerda: a origem fica no botão, à direita. */
  justify-content: flex-end;
}

.ecoam-busca__form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  border: 2px solid transparent;
  border-radius: 999px;
  transition: border-color var(--transicao),
              background-color var(--transicao);
}

.ecoam-busca.is-aberta .ecoam-busca__form {
  border-color: var(--cor-borda);
  background: var(--cor-fundo);
}

.ecoam-busca .ecoam-busca__campo {
  /* min-width e flex-basis também precisam ser zerados: o navegador dá
     uma largura mínima padrão a input, e o flex do form a preserva —
     o que faria o widget ocupar espaço mesmo com width: 0. */
  width: 0;
  min-width: 0;
  flex: 0 0 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-sm);
  color: var(--cor-texto);
  opacity: 0;
  /* Fechado, o campo não recebe clique nem cursor: sem isto, a área de
     largura zero continua clicável e o usuário consegue digitar às cegas. */
  pointer-events: none;
  visibility: hidden;
  transition: width var(--transicao),
              flex-basis var(--transicao),
              padding var(--transicao),
              opacity var(--transicao),
              visibility var(--transicao);
}

.ecoam-busca.is-aberta .ecoam-busca__campo, .ecoam-busca.is-aberta input.ecoam-busca__campo {
  width: 200px;
  flex: 0 0 200px;
  padding: 8px 4px 8px 16px;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Neutraliza os estilos de campo de formulário definidos mais acima. */
.ecoam-busca__campo:hover,
.ecoam-busca__campo:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

/* Remove o X que o navegador adiciona em input[type=search]. */
.ecoam-busca__campo::-webkit-search-decoration,
.ecoam-busca__campo::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ecoam-busca__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  min-height: 40px;
  padding: 0;
  /* O tema define fundo e sombra para todo <button>. Aqui o botão é só
     um ícone, então essas propriedades são zeradas explicitamente. */
  background: transparent !important;
  border: 0;
  border-radius: 50%;
  box-shadow: none !important;
  color: var(--cor-texto);
  cursor: pointer;
  transition: color var(--transicao);
}

.ecoam-busca__botao:hover,
.ecoam-busca__botao:active,
.ecoam-busca__botao:focus {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--cor-acao);
}

/* Com a barra aberta, o ícone acompanha a cor do placeholder para não
   competir com o texto que está sendo digitado. */
.ecoam-busca.is-aberta .ecoam-busca__botao {
  color: var(--cor-texto-suave);
}

.ecoam-busca.is-aberta .ecoam-busca__botao:hover {
  color: var(--cor-acao);
}

/* O Elementor redefine dimensões de SVG dentro dos widgets, por isso
   a medida aqui precisa ser explícita e ter precedência. */
.ecoam-busca .ecoam-busca__botao svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
  flex-shrink: 0;
}

/* Placeholder. */
.ecoam-busca__campo::placeholder {
  color: var(--cor-texto-suave);
  opacity: 1;
}

/* Sobre fundo escuro: apenas o ícone fechado muda de cor. O campo tem
   fundo branco quando aberto, então o texto digitado permanece escuro
   em qualquer variação. */
.ecoam-busca--claro .ecoam-busca__botao {
  color: #FFFFFF;
}

.ecoam-busca--claro.is-aberta .ecoam-busca__botao {
  color: var(--cor-texto-suave);
}

/* No mobile o campo aberto ocupa o espaço disponível. */
@media (max-width: 767px) {
  .ecoam-busca.is-aberta .ecoam-busca__campo {
    width: 150px;
  }
}

/* --- Seletor de idioma (GTranslate) --------------------------------------
   Classes conforme o HTML gerado pelo plugin. O objetivo é deixar apenas
   as bandeiras, sem a caixa branca em volta, tanto no alternador fechado
   quanto na lista aberta.                                               */

.gtranslate_wrapper {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* O widget do Elementor precisa acompanhar a altura dos vizinhos para que
   a bandeira fique na mesma linha do menu e da busca. */
.elementor-widget-shortcode:has( .gtranslate_wrapper ),
.elementor-widget-shortcode:has( .gtranslate_wrapper ) .elementor-widget-container,
.elementor-widget-shortcode:has( .gtranslate_wrapper ) .elementor-shortcode,
.ecoam-widget-idioma,
.ecoam-widget-idioma .elementor-widget-container,
.ecoam-widget-idioma .elementor-shortcode {
  display: flex;
  align-items: center;
  width: auto;
}

/* O plugin posiciona o wrapper como flutuante fixo por padrão. Dentro do
   cabeçalho ele precisa se comportar como um elemento comum da linha. */
#gt_float_wrapper {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  align-items: center;
}

/* Elemento técnico do Google: não deve aparecer em lugar nenhum. */
#google_translate_element2,
.goog-te-gadget,
.goog-te-banner-frame,
.skiptranslate {
  display: none !important;
}

/* --- Alternador fechado --------------------------------------------- */

.gt_float_switcher {
  position: relative !important;   /* âncora para a lista suspensa */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: var(--fonte-corpo) !important;
  font-size: 0 !important;   /* remove o espaço em branco entre os filhos */
  overflow: visible !important;
}

.gt_float_switcher .gt-selected {
  background: transparent !important;
  border: 0 !important;
}

.gt_float_switcher .gt-selected .gt-current-lang {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 4px !important;
  background: transparent !important;
  border: 0 !important;
  color: transparent !important;
  cursor: pointer;
}

/* Esconde o código do idioma ("pt"), mantendo só a bandeira. */
.gt_float_switcher .gt-current-lang .gt-lang-code {
  display: none !important;
}

.gt_float_switcher img {
  width: 22px !important;
  height: auto !important;
  display: block !important;
  border-radius: 2px;
}

/* Seta do alternador, em branco para o cabeçalho colorido. */
.gt_float_switcher .gt_float_switcher-arrow {
  background: transparent !important;
  width: 12px !important;
  height: 12px !important;
  position: relative;
}

.gt_float_switcher .gt_float_switcher-arrow::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  color: #FFFFFF;
}

/* --- Lista aberta ---------------------------------------------------- */

.gt_float_switcher .gt_options {
  /* Absoluta para sobrepor o conteúdo: sem isso a lista entra no fluxo
     e empurra o cabeçalho inteiro para baixo ao abrir. */
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  z-index: 999;
  min-width: 0;
  background: var(--cor-fundo) !important;
  border: 1px solid var(--cor-borda) !important;
  border-radius: var(--raio-sm) !important;
  box-shadow: var(--sombra-md) !important;
  overflow: hidden;
  margin-top: 4px;
}

/* Só as bandeiras na lista. O nome do idioma continua no HTML, mas é
   escondido visualmente — assim leitores de tela ainda o anunciam, o que
   uma bandeira sozinha não faria. */
.gt_float_switcher .gt_options a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 10px !important;
  background: transparent !important;
  font-size: 0 !important;
  text-decoration: none;
  transition: background-color var(--transicao);
}

.gt_float_switcher .gt_options a:hover {
  background: var(--cor-fundo-alt) !important;
}

/* O idioma atual não precisa aparecer na lista. */
.gt_float_switcher .gt_options a.gt-current {
  display: none !important;
}

/* --- Números alcançados (seção 3) ----------------------------------------
   Faixa de contadores. O grid se ajusta sozinho à quantidade de itens
   cadastrados, sem precisar de ajuste no CSS quando o cliente adiciona
   ou remove um número.                                                  */

.ecoam-numeros {
  /* Padrões. O shortcode pode sobrescrever com o parâmetro cor. */
  --numero-cor: var(--cor-institucional);
  --numero-legenda-cor: var(--cor-texto-suave);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--esp-4) var(--esp-2);
  align-items: start;
  width: 100%;
  padding: var(--esp-6) 0;
}

.ecoam-numero {
  text-align: center;
}

.ecoam-numero__linha {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-bold);
  line-height: 1;
  color: var(--numero-cor);
}

.ecoam-numero__valor,
.ecoam-numero__fixo {
  font-size: clamp(2rem, 4vw, 3rem);
  /* Números tabulares: os dígitos têm largura igual, então a contagem
     não faz o texto tremer enquanto os valores mudam. */
  font-variant-numeric: tabular-nums;
}

.ecoam-numero__legenda {
  margin-top: var(--esp-1);
  font-family: var(--fonte-corpo);
  /* Mesma tipografia do parágrafo padrão do site. */
  font-size: var(--txt-base);
  font-weight: var(--peso-normal);
  line-height: var(--altura-corpo);
  color: var(--numero-legenda-cor);
  max-width: 180px;
  margin-inline: auto;
}

/* Aviso exibido apenas para quem pode editar o site. */
.ecoam-aviso {
  padding: var(--esp-2);
  background: var(--cor-fundo-alt);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-sm);
  color: var(--cor-texto-suave);
  font-size: var(--txt-sm);
  text-align: center;
}

@media (max-width: 767px) {
  .ecoam-numeros {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-3) var(--esp-2);
    padding: var(--esp-4) 0;
  }
}

/* --- Jornada EcoAm (seção 6) ---------------------------------------------
   Esteira horizontal de rolagem contínua. O deslocamento é feito por
   JavaScript sobre a trilha; aqui ficam apenas a aparência e o
   comportamento de hover.                                                */

.ecoam-jornada {
  --jornada-fundo: transparent;
  --jornada-largura-card: 320px;
  --jornada-fundo-altura: 100%;
  --jornada-fundo-opacidade: 1;
  --jornada-titulo-cor: var(--cor-texto);
  --jornada-texto-cor: var(--cor-texto-suave);
  --jornada-numero-cor: var(--cor-acao);

  position: relative;
  overflow: hidden;
  width: 100%;
  padding: var(--esp-6) 0;
  background: var(--jornada-fundo);
  cursor: grab;
  /* Impede que o arraste horizontal seja capturado como rolagem da
     página em telas de toque. */
  touch-action: pan-y;
  user-select: none;
}

.ecoam-jornada.is-arrastando {
  cursor: grabbing;
}

/* --- Fundo em paralaxe -------------------------------------------------
   Faixa centralizada verticalmente que desliza mais devagar e em sentido
   contrário aos cards.                                                   */

.ecoam-jornada__fundo {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: var(--jornada-fundo-altura);
  overflow: hidden;
  opacity: var(--jornada-fundo-opacidade);
  pointer-events: none;
  z-index: 0;
}

.ecoam-jornada__fundo-trilha {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.ecoam-jornada__fundo-trilha img {
  /* min-height garante cobertura vertical; a largura acompanha a
     proporção para o desenho não distorcer. */
  height: 100%;
  min-height: 100%;
  width: auto;
  max-width: none;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
}

/* --- Cabeçalho da seção ------------------------------------------------- */

.ecoam-jornada__cabecalho {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--esp-3);
  margin-bottom: 130px;
  /* O cabeçalho não deve capturar o arraste da esteira. */
  cursor: default;
}

.ecoam-jornada__secao-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  /* 81px no desktop, reduzindo em telas menores para não quebrar. */
  font-size: clamp(2.5rem, 7vw, 81px);
  font-weight: var(--peso-bold);
  line-height: 1;
  color: var(--jornada-titulo-cor);
  text-transform: uppercase;
}

/* Os cards ficam acima do fundo. */
.ecoam-jornada__trilha {
  position: relative;
  z-index: 1;
  display: flex;
  /* stretch para que todos os cards tenham a mesma altura, qualquer que
     seja o tamanho do texto. */
  align-items: stretch;
  gap: 30px;
  width: max-content;
  will-change: transform;
}

/* Sem animação: vira uma faixa de rolagem convencional. */
.ecoam-jornada.is-estatica {
  cursor: default;
  overflow-x: auto;
}

.ecoam-jornada.is-estatica .ecoam-jornada__trilha {
  transform: none !important;
}

/* --- Card ------------------------------------------------------------- */

.ecoam-jornada__item {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  flex: 0 0 var(--jornada-largura-card);
  width: var(--jornada-largura-card);
  text-decoration: none;
  color: inherit;
}

/* Vão entre o fim de um conjunto e o começo do seguinte. Tem a largura
   de um card, para que a repetição não pareça uma fila sem fim. */
.ecoam-jornada__vao {
  flex: 0 0 var(--jornada-largura-card);
  width: var(--jornada-largura-card);
  pointer-events: none;
}

.ecoam-jornada__moldura {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  line-height: 0;
  font-size: 0;
}

/* A imagem é posicionada de forma absoluta para preencher a moldura por
   inteiro. Assim nenhuma medida herdada do Elementor pode deixar sobra
   nas bordas — era daí que vinha a faixa de fundo visível abaixo. */
.ecoam-jornada__imagem {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ecoam-jornada__item:hover .ecoam-jornada__imagem,
.ecoam-jornada__item:focus-visible .ecoam-jornada__imagem {
  transform: scale(1.1);
}

/* --- Corpo: número à esquerda, texto à direita ------------------------ */

.ecoam-jornada__corpo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}

.ecoam-jornada__etiqueta {
  flex-shrink: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-weight: var(--peso-bold);
  /* Alinha o topo do número com a primeira linha do título. */
  line-height: 0.85;
  color: var(--jornada-numero-cor);
  pointer-events: none;
}

.ecoam-jornada__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

.ecoam-jornada__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xl);
  font-weight: var(--peso-bold);
  line-height: 1.1;
  color: var(--jornada-titulo-cor);
  transition: color var(--transicao);
}

.ecoam-jornada__item:hover .ecoam-jornada__titulo {
  color: var(--cor-acao);
}

.ecoam-jornada__texto {
  margin: 0;
  font-size: var(--txt-base);
  line-height: var(--altura-corpo);
  color: var(--jornada-texto-cor);
}

/* Sobre fundo escuro ou colorido: usar texto="claro" no shortcode. */
.ecoam-jornada.is-texto-claro {
  --jornada-titulo-cor: #FFFFFF;
  --jornada-texto-cor: rgba(255, 255, 255, 0.85);
  --jornada-numero-cor: #FFFFFF;
}

.ecoam-jornada.is-texto-claro .ecoam-jornada__item:hover .ecoam-jornada__titulo {
  color: var(--ecoam-amarelo);
}

@media (max-width: 767px) {
  .ecoam-jornada {
    --jornada-largura-card: 260px;
    padding: var(--esp-4) 0;
  }

  .ecoam-jornada__etiqueta {
    font-size: 2.75rem;
  }
}

/* --- Setas de carrossel --------------------------------------------------- */

.ecoam-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--cor-borda);
  border-radius: 50%;
  background: transparent;
  color: var(--cor-institucional);
  transition: all var(--transicao);
}

.ecoam-seta:hover:not(:disabled) {
  border-color: var(--cor-acao);
  background: var(--cor-acao);
  color: #FFFFFF;
}

.ecoam-seta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --- Campos de formulário -------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

input:hover, textarea:hover, select:hover {
  border-color: var(--ecoam-areia);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--cor-institucional);
  box-shadow: 0 0 0 3px rgba(44, 122, 53, 0.15);
  outline: none;
}

input[aria-invalid="true"],
.campo-erro input {
  border-color: var(--ecoam-vermelho);
}

.mensagem-erro {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--txt-sm);
  color: var(--ecoam-vermelho);
}

/* ==========================================================================
   4. UTILITÁRIOS
   ========================================================================== */

.ecoam-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--esp-3);
}

/* Visível apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pular para o conteúdo — aparece ao navegar por teclado */
.ecoam-pular {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--esp-2);
  background: var(--cor-institucional);
  color: #FFFFFF;
}

.ecoam-pular:focus {
  left: var(--esp-2);
  top: var(--esp-2);
}

/* ==========================================================================
   5. RESPONSIVO
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --txt-3xl: 2.75rem;
    --txt-2xl: 2rem;
    --esp-12: 4rem;
  }
}

@media (max-width: 767px) {
  :root {
    --txt-3xl: 2.25rem;
    --txt-2xl: 1.75rem;
    --txt-xl: 1.375rem;
    --esp-8: 2.5rem;
    --esp-12: 3rem;
  }

  .ecoam-container { padding-inline: var(--esp-2); }

  /* Sem hover em touch: o card não deve "grudar" no estado de hover */
  .ecoam-card:hover {
    transform: none;
    box-shadow: var(--sombra-sm);
  }

  .ecoam-card:hover img { transform: none; }

  .ecoam-logo-negocio img {
    filter: grayscale(0%);
    opacity: 1;
  }
}

/* ==========================================================================
   6. ACESSIBILIDADE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}