/* ============================================================================
   IDENTIDADE VISUAL — Juliana Benício (Pré-Candidatura)
   Aplica a paleta e a tipografia do manual de marca sobre o tema existente.
   Carregado por ÚLTIMO em todas as páginas, sobrescrevendo as cores/fontes
   antigas SEM alterar a estrutura/layout do site.

   Paleta do manual:
     Azul profundo institucional ... #183A70  (principal: títulos, fundos de autoridade)
     Azul médio luminoso .......... #2F6DB5  (secundária: botões, destaques, números, chamadas)
     Areia clara .................. #E8DCCB  (base neutra: respiro/humanização)
     Off-white .................... #F9F6F1  (neutro de apoio: carrosséis, textos longos)
     Verde sálvia/menta suave ..... #A8C9B4  (acento: selos, detalhes de inovação)

   Tipografia: Sora Bold (títulos) + Inter Regular (corpo).
   ============================================================================ */

:root {
  --jb-azul-profundo: #183A70;
  --jb-azul-medio:     #2F6DB5;
  --jb-areia:          #E8DCCB;
  --jb-offwhite:       #F9F6F1;
  --jb-verde:          #A8C9B4;
}

/* --------------------------------------------------------------------------
   1) Cores globais do Elementor — remapeamento direto.
   O tema define:
     --e-global-color-primary   : #000C35 (azul quase preto — hero/títulos)
     --e-global-color-secondary : #011A6C (azul marinho)
     --e-global-color-23c3c84   : #F4ECC4 (areia/creme — fundos claros)
   Sobrescrevemos todos os escopos onde o Elementor declara essas variáveis.
   -------------------------------------------------------------------------- */
:root,
body,
.elementor-kit-9,
.elementor-page,
.e-con,
.elementor-element {
  --e-global-color-primary:   #183A70 !important;
  --e-global-color-secondary: #2F6DB5 !important;
  --e-global-color-23c3c84:   #F9F6F1 !important;
  --e-global-color-accent:    #2F6DB5 !important;
  --e-global-color-text:      #2b2b2b !important;
}

/* --------------------------------------------------------------------------
   2) Cores antigas "hard-coded" mais frequentes -> paleta de marca.
   Mapeamos os tons de azul vivo/genérico usados em botões e links para o azul
   médio luminoso da marca, e os azuis muito escuros para o azul profundo.
   -------------------------------------------------------------------------- */

/* Azul profundo institucional (fundos escuros do hero, títulos de autoridade) */
[style*="#000C35"],
[style*="#000c35"] { /* mantido para herança via variável */ }

/* Faixas/fundos creme antigos -> off-white da marca, mantendo o "respiro" */

/* --------------------------------------------------------------------------
   3) Tipografia — variáveis globais de fonte do Elementor.
   Mantemos os nomes de família originais (Bellota Text / Roboto), pois o
   brand-fonts.css já redireciona esses nomes para Sora / Inter via @font-face.
   Reforçamos aqui para garantir consistência mesmo onde o tema usa literais.
   -------------------------------------------------------------------------- */
:root,
body,
.elementor-element {
  --e-global-typography-primary-font-family:   "Sora" !important;
  --e-global-typography-primary-font-weight:   700 !important;
  --e-global-typography-secondary-font-family: "Inter" !important;
  --e-global-typography-text-font-family:      "Inter" !important;
  --e-global-typography-accent-font-family:    "Inter" !important;
}

/* Corpo do texto em Inter */
body,
p, li, span, a, input, textarea, button, label,
.elementor-widget-text-editor,
.elementor-widget-container {
  font-family: "Inter", "Roboto", sans-serif;
}

/* Títulos / chamadas em Sora */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: "Sora", "Bellota Text", sans-serif;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   4) Botões e links de destaque -> azul médio luminoso da marca.
   -------------------------------------------------------------------------- */
.elementor-button,
button[type="submit"],
input[type="submit"],
.wpcf7-submit,
.elementor-field-type-submit button {
  background-color: var(--jb-azul-medio) !important;
  border-color: var(--jb-azul-medio) !important;
  color: #ffffff !important;
}
.elementor-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--jb-azul-profundo) !important;
  border-color: var(--jb-azul-profundo) !important;
}

/* Dots do carrossel ativos na cor da marca */
.swiper-pagination-bullet-active {
  background-color: var(--jb-azul-medio) !important;
}

/* --------------------------------------------------------------------------
   5) Sora é mais larga que Bellota Text. O título de display do hero usa
   tamanhos grandes fixos; garantimos que continue legível e contido,
   reduzindo levemente o tracking e permitindo quebra natural.
   -------------------------------------------------------------------------- */
.elementor-heading-title {
  overflow-wrap: break-word;
}

/* ============================================================================
   6) Override de cores "hard-coded" antigas (não vinculadas a variáveis).
   O tema usa literais espalhados nos CSS do Elementor. Aqui remapeamos os
   tons remanescentes para a paleta da marca, com especificidade suficiente
   para vencer as regras originais.

   Mapa:
     #F4ECC4 (areia/creme antiga) -> #F9F6F1 (off-white de marca) em fundos
                                     e -> #183A70 (azul profundo) em textos/ícones
                                     sobre fundo escuro do hero.
     #011A6C (azul marinho)       -> #183A70 (azul profundo) em textos/títulos.
     #000C35 (azul quase preto)   -> #183A70 (azul profundo) em fundos/textos.
     #2575fc / #0056ff (azul vivo)-> #2F6DB5 (azul médio luminoso) em botões/links.
   ============================================================================ */

/* ---- Fundos creme -> off-white da marca ---- */
.elementor [style*="background-color:#F4ECC4"],
.elementor [style*="background-color: #F4ECC4"],
.elementor [style*="background-color:#f4ecc4"],
.e-con[style*="#F4ECC4"],
.e-con[style*="#f4ecc4"] {
  background-color: var(--jb-offwhite) !important;
}

/* Texto/títulos em azul marinho ou quase-preto -> azul profundo institucional */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title {
  color: var(--jb-azul-profundo) !important;
}

/* Mantém títulos claros (sobre fundo escuro) legíveis: quando o tema usa
   a cor creme como texto sobre o hero escuro, troca para off-white. */
.elementor [style*="color:#F4ECC4"],
.elementor [style*="color: #F4ECC4"],
.elementor [style*="color:#f4ecc4"] {
  color: var(--jb-offwhite) !important;
}

/* Ícones SVG que usavam o creme como fill -> off-white (sobre hero escuro) */
.elementor svg[fill="#F4ECC4"],
.elementor [style*="fill:#F4ECC4"],
.elementor [style*="fill:#f4ecc4"] {
  fill: var(--jb-offwhite) !important;
}

/* ---- Botões/links em azul vivo genérico -> azul médio luminoso da marca ---- */
a[style*="#2575fc"], a[style*="#0056ff"],
.elementor-button[style*="#2575fc"],
.elementor-button[style*="#0056ff"] {
  color: var(--jb-azul-medio) !important;
}

/* ============================================================================
   7) Reforço tipográfico: garante Sora real nos títulos de display.
   Embora o brand-fonts.css redirecione "Bellota Text" -> Sora, declaramos
   "Sora" diretamente para garantir o weight bold correto na renderização.
   ============================================================================ */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
  font-family: "Sora", "Bellota Text", sans-serif !important;
  font-weight: 700 !important;
}

/* Acento verde sálvia como detalhe (linhas/realces sutis) em selos de editoria.
   Aplica-se onde o tema desenha pequenos divisores/realces; mantido discreto. */
.elementor-divider-separator {
  border-top-color: var(--jb-verde) !important;
}

/* ============================================================================
   8) Override direcionado por ID dos elementos que usam o creme literal
   (#F4ECC4) — identificados via inspeção no DOM. Sem isso, esses contêineres
   permaneciam com o creme antigo porque a cor está hard-coded em regra de
   maior especificidade do que a variável global.

   Fundos -> off-white da marca (#F9F6F1).
   Textos/ícones sobre o hero escuro -> off-white (legibilidade preservada).
   ============================================================================ */

/* Fundos de seção (faixas claras) -> off-white de marca */
.elementor-element-e036359,
.elementor-element-79cb4c7,
.elementor-element-207a3b5 {
  background-color: var(--jb-offwhite) !important;
}

/* Textos sobre o hero escuro que usavam o creme -> off-white */
.elementor-element-085c719 .elementor-heading-title,
.elementor-element-085c719,
.elementor-element-10505f9,
.elementor-element-194eab9,
.elementor-element-fea078f,
.elementor-element-fea078f .elementor-heading-title {
  color: var(--jb-offwhite) !important;
}

/* Ícones SVG (fill) sobre o hero escuro -> off-white */
.elementor-element-085c719 svg,
.elementor-element-085c719 path,
.elementor-element-35f22c9 svg,
.elementor-element-35f22c9 path,
.elementor-element-df6635d svg,
.elementor-element-df6635d path {
  fill: var(--jb-offwhite) !important;
}


/* =====================================================================
   9) FIX: Galeria filtrável (Essential Addons) — "Inove as Ideias"
   Os itens .fg-layout-3-item dependem do isotope (JS) para virar grade.
   Quando o script não reposiciona, os itens empilham em largura total e a
   imagem do 1º card (TEDx) estica desproporcionalmente.
   Solução: forçar um CSS Grid responsivo estável (independente de JS),
   com imagens de proporção uniforme, alinhado à identidade da marca.
   ===================================================================== */

/* Neutraliza o posicionamento absoluto/altura inline do isotope.
   O número de colunas adapta-se à quantidade de itens da galeria
   (via atributo data-total-gallery-items), reproduzindo o original:
   1 item  -> 1 coluna (card em largura total)
   2 itens -> 2 colunas
   3+      -> 3 colunas */
.eael-filter-gallery-container.eael-filter-gallery-grid {
  position: static !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="1"] {
  grid-template-columns: minmax(0, 1fr) !important;
}
.eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.eael-filter-gallery-container.eael-filter-gallery-grid .eael-filterable-gallery-item-wrap,
.eael-filter-gallery-container.eael-filter-gallery-grid .fg-layout-3-item {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  height: 100% !important;
}

/* Cartão: fundo off-white, cantos e sombra suave coerentes com a marca */
.eael-filter-gallery-container .fg-layout-3-item {
  display: flex !important;
  flex-direction: column !important;
  background: var(--jb-offwhite) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(24, 58, 112, 0.12) !important;
}

/* Miniatura com proporção uniforme entre os cards */
.eael-filter-gallery-container .fg-layout-3-item .gallery-item-thumbnail-wrap,
.eael-filter-gallery-container .fg-layout-3-item .fg-layout-3-item-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

/* Card único (galeria de 1 item): banner mais largo, como no original */
.eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="1"] .fg-layout-3-item .gallery-item-thumbnail-wrap,
.eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="1"] .fg-layout-3-item .fg-layout-3-item-thumb {
  aspect-ratio: 21 / 9 !important;
}

.eael-filter-gallery-container .fg-layout-3-item .gallery-item-thumbnail-wrap img,
.eael-filter-gallery-container .fg-layout-3-item .fg-layout-3-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Conteúdo do cartão */
.eael-filter-gallery-container .fg-layout-3-item .fg-layout-3-item-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px 26px !important;
  background: var(--jb-offwhite) !important;
}

.eael-filter-gallery-container .fg-layout-3-item .fg-item-title {
  color: var(--jb-azul-profundo) !important;
  font-family: "Sora", "Bellota Text", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.18rem !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}

.eael-filter-gallery-container .fg-layout-3-item .fg-item-content,
.eael-filter-gallery-container .fg-layout-3-item .fg-item-content p {
  color: var(--jb-azul-medio) !important;
  font-family: "Inter", "Roboto", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

/* Tablet: no máximo 2 colunas (vence o seletor por data-total-gallery-items
   ao repetir o atributo no seletor, garantindo igual/maior especificidade) */
@media (max-width: 1024px) {
  .eael-filter-gallery-container.eael-filter-gallery-grid,
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="1"],
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="2"],
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
  /* Galeria de 1 item continua em largura total também no tablet */
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="1"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobile: SEMPRE 1 coluna, independentemente do número de itens.
   Repetimos o atributo data-total-gallery-items no seletor para vencer as
   regras [data-total-gallery-items="2"]/"1" definidas acima. */
@media (max-width: 767px) {
  .eael-filter-gallery-container.eael-filter-gallery-grid,
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="1"],
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="2"],
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .eael-filter-gallery-container .fg-layout-3-item .gallery-item-thumbnail-wrap,
  .eael-filter-gallery-container .fg-layout-3-item .fg-layout-3-item-thumb,
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="1"] .fg-layout-3-item .gallery-item-thumbnail-wrap,
  .eael-filter-gallery-container.eael-filter-gallery-grid[data-total-gallery-items="1"] .fg-layout-3-item .fg-layout-3-item-thumb {
    aspect-ratio: 16 / 10 !important;
  }
}


/* =====================================================================
   10) CONTRASTE: tratado dinamicamente por brand-contrast.js
   (a abordagem anterior por lista de IDs foi removida pois forçava off-white
   também em blocos de fundo claro, tornando títulos invisíveis).
   ===================================================================== */


/* =====================================================================
   11) [REVERTIDO] As regras de object-fit dos carrosseis/cards foram
   removidas a pedido: o carrossel da home volta ao comportamento original.
   A correcao de imagens distorcidas e feita SOMENTE nas PAGINAS DE DESTINO
   (posts internos), escopada por body.single para nao afetar a home.
   ===================================================================== */
body.single .elementor-post__thumbnail {
  position: relative !important;
  overflow: hidden !important;
  height: 0 !important;
  padding-bottom: 66% !important; /* ~3:2, altura uniforme nos posts internos */
}
body.single .elementor-post__thumbnail img,
body.single .elementor-post__thumbnail__link img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Carrossel da HOME: reproduz EXATAMENTE o comportamento do tema original.
   No site original, o container .elementor-post__thumbnail de TODOS os posts
   tem altura fixa de 248px com overflow:hidden, e a imagem usa object-fit:fill
   ocupando 100% da largura e da altura. Assim TODAS as thumbnails (TEDx,
   Artigos, etc.) ficam com a MESMA largura e a MESMA altura. */
body.home .elementor-widget-posts .elementor-post__thumbnail {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 248px !important;
  padding-bottom: 0 !important;
}
body.home .elementor-widget-posts .elementor-post__thumbnail img,
body.home .elementor-widget-posts .elementor-post__thumbnail__link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}

/* =====================================================================
   12) MOSAICO (galeria Elementor): remover qualquer nome/legenda das fotos
   Esconde titulos/overlays de titulo da galeria, garantindo que nenhum
   nome de arquivo apareca sobre as imagens (em hover ou estatico).
   ===================================================================== */
.elementor-gallery-item__title,
.e-gallery-item__title,
.elementor-gallery-item__description,
.e-gallery-item__description,
.elementor-gallery__titles-container {
  display: none !important;
}
/* O mosaico usa background-image (cover por padrao do Elementor); reforcamos
   cover para nao deformar caso haja <img> interna. */
.elementor-gallery__container .e-gallery-item img,
.e-gallery-image {
  object-fit: cover !important;
}


/* =====================================================================
   13) SECAO "Me acompanhe nas redes" + "Mande uma mensagem"
   No site original o .e-con-inner e flex-row com DUAS colunas de 570px
   lado a lado: ESQUERDA (feed Instagram + heading "Me acompanhe nas redes"
   + icones sociais) | DIREITA (heading "Mande uma mensagem" + formulario).
   No clone a coluna direita colapsou (275px, left 232) e sobrepunha a
   esquerda. Forcamos as duas colunas a dividir o espaco igualmente e
   eliminamos a altura fixa residual do widget de feed (HTMega).
   Escopo restrito ao container 79cb4c7 para nao afetar o resto do site.
   ===================================================================== */
/* ESTRUTURA (igual ao original): dentro do .e-con-inner do container 79cb4c7
   existem DUAS colunas IRMAS de 570px lado a lado:
     ESQUERDA  = 5b1537d (feed Instagram + heading "Me acompanhe nas redes" + icones)
     DIREITA   = ef35a89 (heading "Mande uma mensagem" + formulario)
   A estrutura HTML ja foi corrigida para que ef35a89 seja irmao de 5b1537d. */
.elementor-element-79cb4c7 > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 30px !important;
}
/* Esconde o spacer estreito (2px) que ficava antes das colunas */
.elementor-element-79cb4c7 > .e-con-inner > .elementor-element-832c0c2 {
  display: none !important;
}
/* As duas colunas: 570px cada, lado a lado */
.elementor-element-79cb4c7 > .e-con-inner > .elementor-element-5b1537d,
.elementor-element-79cb4c7 > .e-con-inner > .elementor-element-ef35a89 {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 555px !important;
  min-width: 0 !important;
  align-self: flex-start !important;
}
/* Coluna esquerda: empilha feed -> heading -> icones */
.elementor-element-5b1537d {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
/* Anula altura fixa residual do widget de feed (HTMega) */
.elementor-element-620a44a,
.elementor-element-620a44a > .elementor-widget-container {
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
}
.elementor-element-5b1537d .jb-ig-feed {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Heading "Me acompanhe nas redes" + icones: largura total da coluna, abaixo da grade */
.elementor-element-2610d9f {
  width: 100% !important;
  margin-top: 26px !important;
}
.elementor-element-2610d9f .elementor-heading-title {
  white-space: normal !important;
}
.elementor-element-085c719 {
  width: 100% !important;
}

/* Empilhar verticalmente em telas menores */
@media (max-width: 900px) {
  .elementor-element-79cb4c7 > .e-con-inner > .elementor-element-5b1537d,
  .elementor-element-79cb4c7 > .e-con-inner > .elementor-element-ef35a89 {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 570px !important;
  }
}


/* =====================================================================
   14) LOGO NA HEADER: aumentar tamanho
   A logo está no widget-image com data-id="d1caa2d" (header). Aumentamos
   a largura para torná-la mais proeminente.
   ===================================================================== */
.elementor-element-d1caa2d {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-right: 60px !important;
  margin-left: 20px !important;
}
.elementor-element-d1caa2d img {
  width: auto !important;
  max-width: none !important;
  height: 70px !important;
  display: block !important;
  object-fit: contain !important;
}


/* --------------------------------------------------------------------------
   15) CARROSSEL: Deixar azuis APENAS os textos específicos
   "Com uma trajetória...", "Secretária Municipal..." e "O Brasil precisa..."
   ===================================================================== */
/* Remover a regra global que estava colorindo todos os textos */

/* --------------------------------------------------------------------------
   16) BOTÃO "ENVIAR": Corrigir cor para azul profundo (#183a70)
   ===================================================================== */
.elementor-button.elementor-size-md {
  background-color: #183A70 !important;
  border-color: #183A70 !important;
  color: white !important;
}

.elementor-button.elementor-size-md:hover {
  background-color: #2F6DB5 !important;
  border-color: #2F6DB5 !important;
}

/* --------------------------------------------------------------------------
   17) PÁGINA "INOVE A REALIDADE": Ajustar cores
   Heading "Inovação, ciência..." e texto do card em azul profundo
   ===================================================================== */
body.page-id-3001 h2.elementor-heading-title,
.elementor-element-088b71d h2.elementor-heading-title {
  color: #183A70 !important;
}

/* Texto "Secretária Municipal de Inovação..." no card */
.elementor-element-11947cf p {
  color: #183A70 !important;
}


/* --------------------------------------------------------------------------
   18) LOGO DO HERO: Aumentar tamanho
   ===================================================================== */
.elementor-element-ae19132 img {
  width: 100% !important;
  max-width: 900px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}


/* --------------------------------------------------------------------------
   19) TEXTOS DO CARROSSEL: Mudar cor de preto para azul profundo
   ===================================================================== */
.elementor-element-591981d p,
.elementor-element-0cad5f4 p {
  color: #183A70 !important;
}


/* Texto "Com uma trajetória que une dedicação..." em azul profundo */
.elementor-element-66a1ab5 p {
  color: #183A70 !important;
}


/* Botão "Enviar" do formulário "Mande uma mensagem" em azul profundo */
.elementor-field-type-submit .elementor-button {
  background-color: #183A70 !important;
  border-color: #183A70 !important;
}

.elementor-field-type-submit .elementor-button:hover {
  background-color: #0f2647 !important;
  border-color: #0f2647 !important;
}


/* --------------------------------------------------------------------------
   20) BOTÕES DE REDES SOCIAIS: Alinhar horizontalmente
   Seção "Me acompanhe nas redes" - ícones devem estar alinhados em linha
   ===================================================================== */
.elementor-element-085c719 .elementor-social-icons-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
}

.elementor-element-085c719 .elementor-grid-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.elementor-element-085c719 .elementor-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Adicionar margem superior aos botões de redes sociais */
.elementor-element-085c719 {
  margin-top: 25px !important;
}


/* --------------------------------------------------------------------------
   21) RESPONSIVIDADE MOBILE
   Logo reduzida 15% no mobile, menu hamburguer alinhado à direita
   ===================================================================== */

/* Mobile: até 768px */
@media (max-width: 768px) {
  /* Logo reduzida 15% no header mobile */
  .elementor-element-d1caa2d {
    margin-right: 30px !important;
    margin-left: 10px !important;
  }
  
  .elementor-element-d1caa2d img {
    height: 60px !important;
  }
  
  /* Menu hamburguer alinhado à direita */
  .elementor-element-3712a8d {
    margin-left: auto !important;
  }
  
  /* Garantir que logo não apareça no banner (hero) no mobile */
  .elementor-element-517b8b7 .elementor-element-d1caa2d {
    display: block !important;
  }
  
  /* Corrigir comportamento de redimensionamento dos ícones de redes */
  .elementor-element-085c719 .elementor-social-icons-wrapper {
    gap: 10px !important;
  }
  
  .elementor-element-085c719 .elementor-icon {
    width: 45px !important;
    height: 45px !important;
  }
}

/* Extra small: até 480px */
@media (max-width: 480px) {
  /* Logo ainda menor em telas muito pequenas */
  .elementor-element-d1caa2d img {
    height: 50px !important;
  }
  
  .elementor-element-d1caa2d {
    margin-right: 15px !important;
    margin-left: 5px !important;
  }
  
  /* Ícones de redes ainda menores */
  .elementor-element-085c719 .elementor-icon {
    width: 40px !important;
    height: 40px !important;
  }
  
  .elementor-element-085c719 .elementor-social-icons-wrapper {
    gap: 8px !important;
  }
}


/* --------------------------------------------------------------------------
   22) CORREÇÕES MOBILE
   ===================================================================== */

/* Remover logo amarela do banner no mobile */
@media (max-width: 768px) {
  .elementor-section-wrap .elementor-element-d1caa2d {
    display: none !important;
  }
}

/* Ícone Instagram branco */
.elementor-social-icon-instagram,
.elementor-social-icon-instagram i,
.elementor-social-icon-instagram svg {
  color: white !important;
  fill: white !important;
}

/* Menu hamburguer alinhado à parede direita */
@media (max-width: 768px) {
  .elementor-element-517b8b7 {
    position: relative !important;
  }
  
  .elementor-element-3712a8d {
    position: absolute !important;
    right: 20px !important;
    margin-left: 0 !important;
    flex: none !important;
  }
}