/* ============================================================================
   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) {
  /* O .e-con-inner é forcado a flex-wrap:nowrap acima (para o desktop). Sem
     liberar o wrap aqui, as colunas com base 100% nao quebram para linhas
     separadas: elas apenas ENCOLHEM para caber lado a lado (~163px cada),
     espremendo o formulario. Permitir o wrap faz cada coluna ocupar a largura
     total e empilhar corretamente no tablet/celular. */
  .elementor-element-79cb4c7 > .e-con-inner {
    flex-wrap: wrap !important;
  }
  .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: 40px !important;
  margin-left: 0 !important;
}
.elementor-element-d1caa2d img {
  width: auto !important;
  max-width: none !important;
  height: 50px !important;
  display: block !important;
  object-fit: contain !important;
}
/* Barra do cabeçalho (desktop): centralizar verticalmente logo e menu na
   mesma linha e permitir que o bloco da logo tenha a largura da imagem,
   evitando que ela transborde para a esquerda / fique "cortada". */
.elementor-element-0e34cdc > .e-con-inner {
  align-items: center !important;
}
.elementor-element-517b8b7 {
  flex: 0 0 auto !important;
  width: auto !important;
  --width: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Faixa tablet (769–1024px): aqui o menu horizontal já colapsou em hambúrguer,
   mas o Elementor mantém o inner com justify-content:center e um menu-box largo
   (~600px), o que empurra a logo para fora da tela à esquerda. Forçamos logo à
   esquerda / hambúrguer à direita e deixamos o menu-box encolher ao conteúdo. */
@media (max-width: 1024px) and (min-width: 769px) {
  .elementor-element-0e34cdc > .e-con-inner {
    justify-content: space-between !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-element-3712a8d {
    flex: 0 1 auto !important;
    width: auto !important;
    --width: auto !important;
  }
}


/* --------------------------------------------------------------------------
   14b) HERO DESKTOP (df6635d): imagem de fundo fixa + filtro azul em degradê
   O fundo do hero desktop vinha de um slideshow do Elementor montado por JS
   a partir do data-settings; nesse export estático o slideshow fica vazio,
   então o hero aparecia cinza (o azul chapado de opacity 0.87 escondia isso).
   Igual ao que já foi feito no hero mobile (35f22c9), fixamos a mesma imagem
   via CSS para que ela sempre apareça, e por cima aplicamos o filtro azul
   em degradê. O container é elementor-hidden-tablet/mobile (só desktop),
   então não precisa de media query.
   ===================================================================== */
.elementor-327 .elementor-element.elementor-element-df6635d {
  position: relative !important;
  background-image: url("/wp-content/uploads/2025/04/470683550_18475569781045256_7491080572138452884_n-e1745589404352.jpg") !important;
  /* A imagem (847x398) preenche exatamente a largura em "cover", então
     background-position-x não teria efeito. Damos um leve zoom (125% da
     largura) para criar folga horizontal e então posicionamos à esquerda
     (x=0%), o que joga o rosto da Juliana bem para a DIREITA. */
  background-size: 125% auto !important;
  background-position: 0% 28% !important;
  background-repeat: no-repeat !important;
}

/* Desativa o slideshow JS do Elementor no hero desktop: ele cobre o overlay
   e não é controlável por CSS (posição/crop). Assim vale só a imagem fixa
   acima, que controlamos por inteiro, e o preview passa a bater com o deploy. */
.elementor-327 .elementor-element.elementor-element-df6635d .elementor-background-slideshow {
  display: none !important;
}

/* Filtro azul em degradê usando ::after (NÃO ::before).
   Motivo: no deploy o slideshow JS do Elementor carrega e desenha a imagem
   como elemento-filho; na ordem de pintura, ::before fica ATRÁS dos filhos
   (some o azul), enquanto ::after fica À FRENTE deles. Assim o filtro azul
   fica garantidamente acima da imagem de fundo (fixa ou do slideshow) e
   abaixo do conteúdo (.e-con-inner com z-index maior).
   Degradê: azul mais forte à esquerda (texto "JULIANA BENÍCIO" e ícones),
   indo a mais transparente à direita, revelando a imagem. */
.elementor-327 .elementor-element.elementor-element-df6635d::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  /* Degradê só na metade esquerda: azul forte à esquerda, desvanecendo até
     ficar 100% transparente na metade (50%); a metade direita fica sem
     filtro, mostrando a imagem por inteiro. */
  background-image: linear-gradient(90deg,
    rgba(20, 52, 104, 0.95) 0%,
    rgba(20, 50, 98, 0.78) 38%,
    rgba(16, 40, 78, 0.30) 55%,
    rgba(14, 36, 70, 0.00) 68%,
    rgba(14, 36, 70, 0.00) 100%) !important;
  opacity: 1 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Neutraliza o overlay ::before original do Elementor (gradiente azul em
   opacity 0.87) para não duplicar/brigar com o ::after. */
.elementor-327 .elementor-element.elementor-element-df6635d::before,
.elementor-327 .elementor-element.elementor-element-df6635d > .elementor-background-slideshow::before,
.elementor-327 .elementor-element.elementor-element-df6635d > .e-con-inner > .elementor-background-slideshow::before {
  background-image: none !important;
  opacity: 0 !important;
}

/* Conteúdo (texto e ícones) ACIMA do filtro ::after (z-index maior que 3) */
.elementor-327 .elementor-element.elementor-element-df6635d > .e-con-inner {
  position: relative !important;
  z-index: 4 !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: tamanho (reduzida um pouco a pedido)
   ===================================================================== */
.elementor-element-ae19132 img {
  width: 100% !important;
  max-width: 400px !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 - CABEÇALHO LIMPO */
@media (max-width: 768px) {
  /* Barra do cabeçalho: o e-con-inner do container 0e34cdc alinha
     logo (à esquerda) e menu hamburguer (à direita) lado a lado */
  .elementor-element-0e34cdc > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 8px 16px !important;
    gap: 12px !important;
  }

  /* Bloco da logo não ocupa a linha toda */
  .elementor-element-517b8b7 {
    flex: 0 0 auto !important;
    width: auto !important;
    --width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Logo à esquerda com tamanho controlado */
  .elementor-element-d1caa2d {
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    --width: auto !important;
    display: block !important;
    /* Neutraliza o zoom de 1.3x aplicado pelo Elementor no mobile */
    transform: none !important;
  }

  /* O Elementor aplica o scale(1.3) mobile no .elementor-widget-container
     (não no widget nem no img), fazendo a logo transbordar para a esquerda.
     Neutralizamos aqui para a logo ficar no tamanho real e sem corte. */
  .elementor-element-d1caa2d > .elementor-widget-container {
    transform: none !important;
  }

  .elementor-element-d1caa2d img {
    height: 38px !important;
    width: auto !important;
    transform: none !important;
  }

  /* Container do menu à direita, sem ocupar espaço extra */
  .elementor-element-3712a8d {
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    --width: auto !important;
    position: static !important;
    transform: none !important;
  }

  /* Ícones de redes (rodapé/contato) */
  .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: 34px !important;
  }

  .elementor-element-d1caa2d > .elementor-widget-container {
    transform: none !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 SEÇÃO HERO MOBILE (container 35f22c9)
   ===================================================================== */

/* Logo do hero mobile: trazida de volta (mesma imagem do desktop,
   logo-hero-juliana.png), pequena e ALINHADA À ESQUERDA, sobre a área
   vazia da foto, para não ficar em cima da Juliana (que está à direita).
   Os ícones sociais também vão para a esquerda, logo abaixo. */
.elementor-element-0101cdb {
  display: block !important;
  text-align: left !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  width: 100% !important;
}
.elementor-element-0101cdb > .elementor-widget-container {
  transform: none !important;
}
.elementor-element-0101cdb img {
  width: auto !important;
  max-width: 160px !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  /* Sombra sutil para a logo (versão clara) ficar legível sobre a foto,
     já que o hero mobile não tem filtro azul. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)) !important;
}
/* Ícones sociais alinhados à esquerda (o container é row-reverse, então
   flex-end os empacota à esquerda mantendo a ordem visual original). */
.elementor-element-d93db09 {
  justify-content: flex-end !important;
}

/* Ícone Instagram do hero mobile usa webfont (icon-instagram-1),
   que fica azul por padrão. Forçar branco como os demais SVGs */
.elementor-element-35f22c9 .elementor-icon,
.elementor-element-35f22c9 .elementor-icon i,
.elementor-element-35f22c9 .elementor-icon i::before,
.elementor-element-35f22c9 .icon-instagram-1,
.elementor-element-35f22c9 .icon-instagram-1::before {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.elementor-element-35f22c9 .elementor-icon svg {
  fill: #ffffff !important;
}

/* Diminuir o tamanho dos ícones sociais do hero mobile */
.elementor-element-d93db09 {
  gap: 14px !important;
}

.elementor-element-35f22c9 .elementor-icon {
  font-size: 26px !important;
}

.elementor-element-35f22c9 .elementor-icon svg {
  width: 26px !important;
  height: 26px !important;
}

.elementor-element-35f22c9 .icon-instagram-1::before {
  font-size: 26px !important;
}


/* --------------------------------------------------------------------------
   23) FUNDO DO HERO MOBILE (container 35f22c9)
   A galeria de slideshow do mobile está vazia no HTML, então definimos
   a mesma imagem de fundo do banner desktop para que fique visível
   ===================================================================== */
@media (max-width: 767px) {
  .elementor-element-35f22c9 {
    position: relative !important;
    min-height: 300px !important;
    background-image: url("/wp-content/uploads/2025/04/470683550_18475569781045256_7491080572138452884_n-e1745589404352.jpg") !important;
    background-size: cover !important;
    /* x maior => a foto desloca levemente para a ESQUERDA (a pedido),
       cortando um pouco menos a Juliana. */
    background-position: 28% center !important;
    background-repeat: no-repeat !important;
  }

  /* Zera o overlay azul escuro (opacity 0.87) que o Elementor injeta no
     ::before do container/slideshow, para não brigar com o nosso degradê. */
  .elementor-327 .elementor-element.elementor-element-35f22c9 .elementor-background-slideshow::before,
  .elementor-327 .elementor-element.elementor-element-35f22c9::before {
    background-image: none !important;
    background-color: transparent !important;
    opacity: 0 !important;
  }

  /* Mesmo degradê azul do desktop, adaptado ao mobile: como a logo e os
     ícones ficam à ESQUERDA e a Juliana à direita, o degradê vai de azul
     forte à esquerda a transparente à direita. Via ::after (acima da
     imagem, abaixo do conteúdo). */
  .elementor-327 .elementor-element.elementor-element-35f22c9::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: linear-gradient(90deg,
      rgba(20, 52, 104, 0.95) 0%,
      rgba(20, 50, 98, 0.78) 40%,
      rgba(16, 40, 78, 0.30) 60%,
      rgba(14, 36, 70, 0.00) 74%,
      rgba(14, 36, 70, 0.00) 100%) !important;
    opacity: 1 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Conteúdo (logo + ícones) acima do degradê */
  .elementor-element-35f22c9 > .e-con-inner,
  .elementor-element-35f22c9 .elementor-element-2e4bc36,
  .elementor-element-35f22c9 .elementor-element-d93db09 {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Logo + ícones na PARTE DE BAIXO do hero (a pedido): o e-con-inner ocupa
     toda a altura do hero e empurra o bloco (2e4bc36) para o fim, colado
     ao rodapé do hero (folga mínima). */
  .elementor-element-35f22c9 > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 300px !important;
    padding-bottom: 0 !important;
  }
  .elementor-element-35f22c9 .elementor-element-2e4bc36 {
    margin-top: auto !important;
    margin-bottom: 6px !important;
  }
}


/* --------------------------------------------------------------------------
   24) MENU MOBILE COMO BARRA LATERAL (SIDEBAR DESLIZANTE)
   O dropdown do Elementor (nav.elementor-nav-menu--dropdown) vira uma
   sidebar que desliza da direita quando o toggle está ativo
   ===================================================================== */
@media (max-width: 768px) {
  /* O toggle (hamburguer) precisa ficar acima da sidebar */
  .elementor-element-dbaa964 .elementor-menu-toggle {
    position: relative !important;
    z-index: 1002 !important;
    color: #14294f !important;
  }

  /* Sidebar: fixa, fora da tela à direita por padrão */
  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 78vw !important;
    max-width: 320px !important;
    background: #14294f !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35) !important;
    padding: 88px 24px 32px !important;
    transform: translateX(100%) !important;
    transition: transform 0.28s cubic-bezier(0.23, 1, 0.32, 1) !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Quando o menu está ativo, a sidebar entra na tela */
  .elementor-element-dbaa964.elementor-active nav.elementor-nav-menu--dropdown,
  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown[aria-hidden="false"] {
    transform: translateX(0) !important;
  }

  /* Itens do menu na sidebar: empilhados, texto claro */
  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown ul.elementor-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown .elementor-item {
    color: #ffffff !important;
    font-size: 17px !important;
    padding: 14px 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-align: left !important;
  }

  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown .elementor-item.highlighted {
    color: #7ec99f !important;
    background: transparent !important;
  }

  /* Submenus dentro da sidebar */
  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown .sub-menu {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    margin: 4px 0 !important;
  }

  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown .sub-menu .elementor-sub-item {
    color: #e6ecf5 !important;
    font-size: 15px !important;
    padding: 10px 16px !important;
  }

  /* Ícones dos submenus (setinha) em branco */
  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown .elementor-item .sub-arrow svg,
  .elementor-element-dbaa964 nav.elementor-nav-menu--dropdown svg {
    fill: #ffffff !important;
  }
}