/* ============================================================================
   Ajuste de responsividade — Juliana Benício
   Carregado por ÚLTIMO em todas as páginas para corrigir o transbordo de
   títulos grandes em larguras intermediárias (tablet, 768–1024px), onde os
   itens flex do Elementor não encolhem (min-width:auto) e os títulos de 72px
   transbordam, sobrepondo-se às colunas vizinhas do carrossel.

   Princípios:
   - NÃO altera a aparência em desktop (>1024px) nem em celular (<=767px).
   - Apenas permite que os itens flex encolham e que textos longos quebrem,
     mantendo cada elemento contido na sua própria coluna.
   ============================================================================ */

@media (max-width: 1024px) {
  /* Permite que os contêineres/itens flex do Elementor encolham abaixo do
     tamanho do seu conteúdo, eliminando o overflow horizontal que causa a
     sobreposição entre colunas. */
  .e-con,
  .e-con-inner,
  .e-con > .e-con-inner,
  .elementor-element,
  .elementor-widget,
  .elementor-widget-wrap,
  .elementor-widget-container,
  .e-n-carousel,
  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /* Garante que textos e títulos longos quebrem dentro da coluna em vez de
     forçar a largura do contêiner. Usamos apenas overflow-wrap (que só quebra
     palavras quando elas realmente não cabem), evitando word-break/hyphens que
     fatiavam palavras curtas no meio (ex.: "Inova-ção"). */
  .elementor-heading-title,
  .elementor-widget-text-editor,
  .elementor-widget-heading,
  h1, h2, h3, h4, p, a, span, li {
    overflow-wrap: break-word;
  }

  /* Impede que imagens estourem a largura das colunas estreitas. */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Faixa estrita de tablet (768–1024px): os três títulos de display do site
   são fixados em 72px e só encolhem abaixo de 767px. Nessa faixa, dentro das
   colunas estreitas do carrossel, eles transbordam e se sobrepõem às colunas
   vizinhas. Aqui usamos um tamanho fluido que acompanha a largura da viewport,
   limitado entre ~32px e 60px, mantendo a mesma hierarquia visual do original
   sem causar overflow. Os IDs correspondem exatamente aos títulos de display
   identificados nos CSS do Elementor (24c32a7, 4277893, df8a1d3). */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-24c32a7 .elementor-heading-title,
  .elementor-element-4277893 .elementor-heading-title,
  .elementor-element-df8a1d3 .elementor-heading-title {
    font-size: clamp(32px, 6vw, 60px) !important;
    line-height: 1.1 !important;
  }

  /* Generaliza para qualquer título de display muito grande remanescente,
     garantindo que nenhum heading >56px estoure a coluna na faixa de tablet. */
  .elementor-heading-title {
    line-height: 1.15;
  }
}

/* Faixa de celular largo / phablet (em torno de 768px exatos), o Elementor
   ainda mantém colunas lado a lado; garantimos a redução do título também
   nessa borda para não transbordar. */
@media (min-width: 600px) and (max-width: 767px) {
  .elementor-element-24c32a7 .elementor-heading-title,
  .elementor-element-4277893 .elementor-heading-title,
  .elementor-element-df8a1d3 .elementor-heading-title {
    line-height: 1.1;
  }
}

/* ============================================================================
   Centralização dos dots (paginação) do carrossel de posts.
   No original, os dots ficam centralizados sob o carrossel (text-align:center
   + width:100%). No widget de "posts" do Elementor com carrossel, o elemento
   .swiper-pagination acaba renderizado com largura automática alinhada à
   esquerda. Aqui forçamos a faixa de paginação a ocupar 100% e centralizar os
   bullets, replicando exatamente o comportamento do site original.
   Escopo restrito ao widget de posts para NÃO afetar o carrossel aninhado
   (n-carousel), que usa posicionamento próprio via variáveis CSS.
   ============================================================================ */
/* Replica exatamente o comportamento do original: o grupo de bullets fica
   compacto e centralizado horizontalmente sob o carrossel via left:50% +
   translateX(-50%). Isso vence o estilo inline que o Swiper aplica (que, no
   ambiente do clone, deixava os dots encostados à esquerda). */
.elementor-element-33fc429 .swiper-pagination,
.elementor-widget-posts .swiper-pagination {
  left: 50% !important;
  right: auto !important;
  width: auto !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  display: inline-flex !important;
  gap: 8px;
  justify-content: center !important;
}

.elementor-element-33fc429 .swiper-pagination .swiper-pagination-bullet,
.elementor-widget-posts .swiper-pagination .swiper-pagination-bullet {
  float: none !important;
  margin: 0 !important;
}

/* ============================================================================
   Hardening mobile (<= 767px): evita rolagem horizontal e mantém o layout
   harmônico, sem alterar a estrutura/aparência do original — apenas impede
   que qualquer elemento estoure a largura da viewport.
   ============================================================================ */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .e-con,
  .e-con-inner,
  .elementor-element,
  .elementor-widget,
  .elementor-widget-wrap,
  .elementor-widget-container,
  .e-n-carousel,
  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Imagens e mídias nunca estouram a coluna no celular. */
  img,
  video,
  iframe {
    max-width: 100% !important;
    height: auto;
  }
}