/* =============================================================================
   Chamado 11809 - Reformulacao MOBILE da Home (<=768px)
   -----------------------------------------------------------------------------
   TODAS as regras deste arquivo estao restritas a "@media (max-width:768px)".
   Desktop e tablet (>768px) permanecem 100% intactos.
   Carregado por ultimo na MasterPage.master para vencer por ordem de cascata.
   Trabalha em conjunto com app/js/mobile-home-11809.js
   ============================================================================= */
@media (max-width: 768px) {

  /* -------------------------------------------------------------------------
     ITEM 1 - TOPO/HEADER (igual imagem 2):
       LOGO (branco) + botao LOGIN (direto) + icone HAMBURGUER (menu existente).
     Mantem a pilula branca original do Elementor (nao adiciona 2a borda).
     ------------------------------------------------------------------------- */
  /* Remove apenas o dropdown do Login (caret + itens Minha previdencia/Quero aderir) */
  #botao-login .e-n-menu-dropdown-icon,
  #botao-login .e-n-menu-content {
    display: none !important;
  }

  /* Login clicavel direto; usa a pilula ja existente (borda branca 50px) */
  #botao-login .e-n-menu-title {margin-left: 95px !important;}
  #botao-login .e-n-menu-title-container { cursor: pointer;}

  /* Reduz ~20% a pilula do LOGIN (altura, largura e texto) no mobile.
     Sobrescreve as variaveis do Elementor (originais: font 16px / padding 15px 60px). */
  #botao-login {
    --n-menu-title-font-size: 13px !important;             /* 16px -> ~20% menor */
    --n-menu-title-padding: 12px 48px 12px 48px !important; /* 15px/60px -> ~20% menor */
  }
  #botao-login .e-n-menu-title-text {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    text-align:center;
  }

  /* A pilula azul-clara passa a ser UMA barra continua (logo + login + hamburguer),
     sobreposta ao banner (header transparente e por cima da imagem). */
  #header-main {
    background: transparent !important;
    position: fixed !important;              /* topo FLUTUANTE que acompanha o scroll */
    left: 0 !important; right: 0 !important; top: 0 !important;
    z-index: 100 !important;
  }
  /* Barra azul-clara CONTINUA (logo + LOGIN + hamburguer) - CSS puro = instantaneo */
  #header-main > .e-con-inner {
    margin-top:20px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box;
    background-color: #0793FC !important;
    border-radius: 100px !important;
    padding: 1px 1px !important;
    /* Mantem a ALTURA ORIGINAL da barra azul (nao encolher com o LOGIN menor).
       Antes a altura vinha da pilula do LOGIN (~48px); agora e fixada aqui. */
    min-height: 68px !important;
  }
  #header-main .elementor-element-26739972 {   /* container do logo (transparente) */
    flex: 0 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header-main .elementor-element-64efdd1b {   /* container do LOGIN - sem pilula propria */
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Ordem dentro do container: LOGIN (esq) e HAMBURGUER (dir), ambos no azul */
  #botao-login { order: 1 !important; flex: 0 0 auto !important; }

  #header-main .elementor-element-e912aaa {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: transparent !important;
  }
  #header-main .elementor-element-e912aaa .elementor-icon svg {
    fill: #ffffff !important;
    width: 28px !important;
    height: 28px !important;
    margin-left: 50px !important;
    margin-right: 10px;
  }

  /* Troca o logo pelo logo BRANCO no mobile e ajusta o tamanho */
  #header-main .elementor-element-14ef4090 img {
    /* caminho RELATIVO (a partir de /{base}/app/css/) p/ nao depender de /v2025 fixo
       -> funciona em qualquer ambiente (v2025, v2026, raiz). O CSS e estatico e nao
       processa <%= %>, por isso usamos caminho relativo em vez de UrlBase. */
    content: url("../../wp-content/uploads/2025/01/logo-fbpc-branco.png");
    width: auto !important;
    height: auto !important;
    max-height: 42px !important;
    max-width: 52vw !important;
    object-fit: contain;
  }

  /* -------------------------------------------------------------------------
     ITEM 2 - BANNER PRINCIPAL (hero d708a6b): a IMAGEM vira o fundo do hero
     (atras do header), maior, como no desktop. Remove as faixas azul-marinho
     (padding herdado) e leva o botao EXPLORAR ao canto inferior ESQUERDO.
     ------------------------------------------------------------------------- */
  /* Remove as faixas navy e define a ALTURA do banner.
     >>> AJUSTE AQUI: mude "--banner-altura" para aumentar/diminuir a imagem <<< */
  .elementor-14 .elementor-element-d708a6b {
    --banner-altura: 280px;              /* <<< TESTE ESTE VALOR (ex.: 260px, 340px, 60vh) */
    --min-height: var(--banner-altura) !important;
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: var(--banner-altura) !important;
    align-items: stretch !important;
    overflow: hidden;
  }
  /* A imagem preenche todo o hero (largura + altura), recortando o excesso */
  .elementor-14 .elementor-element-dcce637 {
    width: 100% !important;
    height: var(--banner-altura) !important;
    align-self: stretch !important;
  }
  .elementor-14 .elementor-element-dcce637 .elementor-widget-container,
  .elementor-14 .elementor-element-dcce637 .elementor-widget-container > a {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    line-height: 0 !important;
  }
  .elementor-14 .elementor-element-dcce637 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       /* preenche sem distorcer; recorta o que sobra */
    object-position: center !important; /* mude p/ "left center" p/ priorizar o texto */
    display: block !important;
  }
  /* Camada do EXPLORAR sobre a imagem, no canto inferior ESQUERDO */
  .elementor-14 .elementor-element-c0e531a {
    --justify-content: flex-start !important;
    --align-items: flex-end !important;
    --padding-bottom: 22px !important;
    --padding-left: 22px !important;
    z-index: 3 !important;
  }
  .elementor-14 .elementor-element-96eda4b {
    width: auto !important;
    max-width: 100% !important;
    align-self: flex-end !important;
  }
  .elementor-14 .elementor-element-96eda4b .elementor-widget-container,
  .elementor-14 .elementor-element-96eda4b .elementor-button-wrapper {
    text-align: left !important;
  }
  /* Botao EXPLORAR menor no mobile (ajuste padding/font conforme necessario) */
  .elementor-14 .elementor-element-96eda4b .elementor-button {
    padding: 9px 18px !important;
    font-size: 11px !important;
    margin-left: 8px !important;
  }

  /* Reduz o espacamento entre o banner (Explorar) e a secao "Sobre nos"
     (era padding-top 100px -> 45px, >50% menor) */
  .elementor-14 .elementor-element-c5cc697 {
    --padding-top: 25px !important;
    padding-top: 25px !important;
  }

  /* Oculta o container decorativo (padrao) abaixo do "Sobre nos" para o
     bloco "Nossos Planos" subir */
  .elementor-14 .elementor-element-9ccbc14 { display: none !important; }

  /* Reduz o espacamento superior e inferior de "Nossos Planos"
     (margin-top e margin-bottom eram 100px) */
  .elementor-14 .elementor-element-f19e979 {
    --margin-top: 45px !important;
    margin-top: 45px !important;
    --margin-bottom: 30px !important;
    margin-bottom: 30px !important;
  }

  /* -------------------------------------------------------------------------
     EXTRA (nao citado no chamado, mas presente no modelo) - "SOBRE NOS":
     6 contadores em GRID de 2 COLUNAS; titulo e botao ocupam a linha inteira.
     Ordem (segue o DOM): participantes|patrimonio, planos|entes, 1o|31o.
     ------------------------------------------------------------------------- */
  .elementor-14 .elementor-element-d4cba5e {    
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
    align-items: start !important;
    justify-items: center !important;
    /* (1) Respiro de ~10px nos DOIS lados: largura limitada + centralizado */
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    border-radius: 20px 20px 20px 20px !important;
  }
  /* Titulos roxos menores e em UMA linha (sem quebrar) */
  .elementor-14 .elementor-element-d4cba5e .elementor-counter-title {
    font-size: 13px !important;
    font-weight: bold;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }
  /* (2) "Sobre nos": colado no topo e afastado dos contadores de baixo */
  .elementor-14 .elementor-element-d4cba5e > .elementor-element-890eb56 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 12px !important;
  }
  /* (3)+(4) Bloco "fonte + Saiba mais": fonte em cima centralizada,
     botao mais afastado da fonte, e mais largo/estreito */
  .elementor-14 .elementor-element-59db1ff .elementor-widget-container,
  .elementor-14 .elementor-element-59db1ff .elementor-button-wrapper {
    width: 100% !important;
  }
  .elementor-14 .elementor-element-59db1ff .elementor-button-wrapper {
    display: flex !important;
    flex-direction: column-reverse !important;  /* fonte (ultima no DOM) sobe */
    align-items: center !important;
    gap: 26px !important;                        /* (4) botao mais afastado da fonte */
  }
  .elementor-14 .elementor-element-59db1ff .text-right-fonte {
    display: block !important;
    font-weight:700 ;
    width: 100% !important;
    text-align: center !important;               /* (3) fonte centralizada */
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  /* (4) Botao "Saiba mais": mais largo (horizontal) e mais estreito (vertical) */
  .elementor-14 .elementor-element-59db1ff .elementor-button {
    padding: 15px 48px !important;
    margin-top: 20px !important;

  }
  /* Titulo "Sobre nos" e bloco "fonte + Saiba mais" ocupam as 2 colunas */
  .elementor-14 .elementor-element-d4cba5e > .elementor-element-890eb56,
  .elementor-14 .elementor-element-d4cba5e > .elementor-element-59db1ff {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Cada contador ocupa sua celula (nao mais 100% da largura) */
  .elementor-14 .elementor-element-d4cba5e > .elementor-widget-counter {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }


        /* -------------------------------------------------------------------------
     ITEM 3 - NOSSOS PLANOS: titulo/botao do plano fixo, troca so por setas.
     Esconde a barra original de abas (varios botoes) e as setas internas dos
     cards; o seletor de plano (pill + setas) e injetado pelo JS.
     Os cards do plano continuam deslizando por toque (Swiper nativo).
     ------------------------------------------------------------------------- */
        .elementor-element-3516035 .e-n-tabs-heading { display: none !important; }

  /* seletor de plano injetado (pill central + setas laterais) */
  .mob-plan-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 28px;
    padding: 0 10px;
  }
  .mob-plan-switch .mob-plan-arrow {
    flex: 0 0 auto;
    width: 60px; height: 60px;          /* caixa maior p/ comportar a seta dobrada */
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: #010555;
    font-size: 52px;                    /* seta 100% maior (era 26px) */
    line-height: 1;
    /* o glifo ‹ › fica alto dentro da caixa (metrica da fonte); este padding
       compensa e alinha a seta ao centro vertical do texto da pilula. */
    padding-bottom: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .mob-plan-switch .mob-plan-arrow:active { opacity: .5; }
  .mob-plan-switch .mob-plan-label {
    /* Largura FIXA (item 2): todos os nomes ocupam o mesmo tamanho de pilula,
       mesmo um nome curto como "PBI" (a pilula fica "mais comprida" que o texto). */
    flex: 0 0 210px;
    width: 210px;
    max-width: 210px;
    text-align: center;
    background: #16d6b7;
    color: #003a63;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 999px;
    padding: 14px 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }

  /* esconde as setas proprias do carrossel de cards dentro das abas (so swipe) */
  .elementor-element-3516035 .elementor-swiper-button,
  .elementor-element-3516035 .elementor-swiper-button-prev,
  .elementor-element-3516035 .elementor-swiper-button-next { display: none !important; }

  /* Cards: os 4 cantos arredondados aparecem afastando o card das bordas.
     Usa PADDING no slide (border-box) para o card nao estourar a largura
     (o card tem --width:100%, entao margem o faria transbordar e cortar). */
  .elementor-element-3516035 .swiper-slide {
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .elementor-element-3516035 .swiper-slide > .e-con {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  /* ITEM 2c - "Espiada" dos planos: MESMO efeito/fluxo do carrossel de Vantagens.
     O JS reconstroi o Swiper (slidesPerView:auto + centeredSlides + loop + autoplay);
     aqui definimos a largura do slide e o realce: card central nitido, vizinhos
     esmaecidos/menores/desfocados (previa). Classe .mob-plan-peek vem do JS. */
  /* A wrapper vinha com justify-content:center (Elementor/e-swiper). Com poucos
     cards isso deslocava os slides (ex.: offsetLeft -156px) e brigava com o
     posicionamento por transform do Swiper -> card central saia ~40px torto e
     opaco. flex-start devolve o controle de posicao ao Swiper. */
  .elementor-element-3516035 .e-n-carousel.mob-plan-peek .swiper-wrapper {
    justify-content: flex-start !important;
  }
  /* O carrossel vinha com margin lateral de 30px (Elementor) que o estreitava
     (335 -> 275) e nao sobrava espaco para a previa dos vizinhos. Usamos full-bleed:
     o carrossel ocupa a LARGURA TOTAL da viewport (100vw, borda a borda), mesmo
     estando dentro de containers com padding. Assim as margens laterais viram
     espaco real para as previas esmaecidas. */
  .elementor-element-3516035 .e-n-carousel.mob-plan-peek {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;   /* full-bleed centralizado */
    margin-right: calc(-50vw + 50%) !important;
  }
  .elementor-element-3516035 .e-n-carousel.mob-plan-peek .swiper-slide {
    width: 60% !important;                 /* card central + MAIS previa lateral (loop mostra vizinhos dos 2 lados) */
    height: auto !important;
    box-sizing: border-box !important;
    opacity: .85 !important;
    transform: scale(.9) !important;
    filter: blur(2px) !important;
    transition: opacity .35s ease, transform .35s ease, filter .35s ease !important;
  }
  /* Card central nitido: quem manda e a classe .mob-peek-center, aplicada pelo JS
     ao slide REALMENTE mais proximo do centro (independe do .swiper-slide-active,
     que no modo loop do Swiper pode ser um clone fora da tela). Mantemos tambem
     .swiper-slide-active como fallback caso o JS nao rode. */
  .elementor-element-3516035 .e-n-carousel.mob-plan-peek .swiper-slide.mob-peek-center,
  .elementor-element-3516035 .e-n-carousel.mob-plan-peek .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: none !important;
  }

  /* -------------------------------------------------------------------------
     ITEM 5 - VANTAGENS: cards deslizam por toque (scroll-snap nativo).
     O JS envolve os 4 cards em ".mob-swipe-track". O botao "Inscreva-se"
     fica fora da trilha e continua clicavel normalmente.
     ------------------------------------------------------------------------- */
  .mob-swipe-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 16px 12px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .mob-swipe-track::-webkit-scrollbar { display: none; }
  .mob-swipe-track > .e-con {
    flex: 0 0 70%;
    scroll-snap-align: center;
    margin: 0 !important;
  }

  /* Reduz em 70% o gap entre "Vantagens" e a secao do VIDEO
     (video 8b06cae: margin-top 100px -> 30px) */
  .elementor-14 .elementor-element-8b06cae {
    --margin-top: 10px !important;
    margin-top: 10px !important;
  }

  /* Reduz em 50% o gap acima/abaixo do botao "Inscreva-se aqui"
     (mobile era margin-top 25px / margin-bottom 50px) */
  .elementor-14 .elementor-element-574c978 {
    --margin-top: 12px !important;
    --margin-bottom: 25px !important;
    margin-top: 12px !important;
    margin-bottom: 25px !important;
  }

  /* Efeito coverflow: card ativo centralizado/nitido; vizinhos desfocados */
  .mob-vant-swiper {
    overflow: hidden !important;
    padding: 10px 0 18px !important;
  }
  .mob-vant-swiper .swiper-slide {
    width: 64% !important;
    height: auto !important;
    box-sizing: border-box;
    opacity: .45;
    transform: scale(.9);
    filter: blur(2px);
    transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  }
  .mob-vant-swiper .swiper-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
  .mob-vant-swiper .swiper-slide > .e-con {
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
  }

  /* -------------------------------------------------------------------------
     ITEM 7 - DEPOIMENTOS  /  ITEM 8 - NOTICIAS
     Setas injetadas pelo JS para os Swipers reinicializados no mobile.
     ------------------------------------------------------------------------- */
  .mob-swiper-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 38px; height: 38px;
    border: none; background: transparent;
    color: #010555; font-size: 30px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .mob-swiper-nav.mob-prev { left: 2px; }
  .mob-swiper-nav.mob-next { right: 2px; }
  .mob-swiper-host { position: relative; }

  /* DEPOIMENTOS (a0774c9): corredores laterais afastam o card; setas ficam
     nesses corredores (fora do card branco) e 2x maiores. */
  .elementor-element-a0774c9 .mob-swiper-host {
    position: relative !important;
    padding-left: 44px !important;    /* mesmos corredores do banner-carousel-container */
    padding-right: 44px !important;
    box-sizing: border-box !important;
    /* Reserva espaco p/ as bolinhas absolutas abaixo do card (margin nao afeta o
       top:50% das setas, que continuam centradas no card). */
    margin-bottom: 40px !important;
  }
  /* Card com a MESMA largura do BANNER (preenche o miolo entre os corredores) */
  .elementor-element-a0774c9 .elementor-testimonial {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  /* Relato e autor centralizados */
    .elementor-element-a0774c9 .elementor-testimonial__text {
        text-align: center !important;
        margin-top: -5px !important;
    }
  .elementor-element-a0774c9 .elementor-testimonial__footer {
    position: static !important;
    text-align: center !important;
    margin: 12px 0 0 0 !important;        /* leve respiro entre o texto e o autor */
  }

  /* ALTURA IGUAL para TODOS os depoimentos (= a do maior, ex.: "Simoni"), para o
     carrossel nao ficar "abrindo e fechando" ao trocar de slide. align-items:stretch
     faz todos os slides terem a altura do mais alto; o card interno preenche 100%. */
  .elementor-element-a0774c9 .elementor-main-swiper .swiper-wrapper {
    align-items: stretch !important;
  }
  .elementor-element-a0774c9 .elementor-main-swiper .swiper-slide {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .elementor-element-a0774c9 .elementor-main-swiper .swiper-slide > * {
    flex: 1 1 auto !important;   /* o card branco preenche toda a altura do slide */
  }
  /* Conteudo do depoimento CENTRALIZADO VERTICALMENTE no card: como a altura e
     fixa (= a do maior), os depoimentos curtos deixavam muito branco embaixo.
     flex column + justify-content:center distribui o texto+autor na regiao central. */
  .elementor-element-a0774c9 .elementor-main-swiper .swiper-slide .elementor-testimonial {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
  }
  /* Fecha o vao entre a ASPA de cima e o texto (a aspa tinha muita altura de linha)
     e mantem tudo compacto. */
  .elementor-element-a0774c9 .elementor-testimonial__content {
    margin: 0 !important;
  }
  /* Aspa de cima e de baixo, cada uma na sua linha, com LEVE respiro ao texto */
  .elementor-element-a0774c9 .elementor-testimonial__text > span {
    display: block !important;
    line-height: 1 !important;
  }
  .elementor-element-a0774c9 .elementor-testimonial__text > span:first-child {
    margin-bottom: 3px !important;        /* respiro entre a aspa de cima e o texto */
  }
  .elementor-element-a0774c9 .elementor-testimonial__text > span:last-child {
    margin-top: 3px !important;           /* respiro entre o texto e a aspa de baixo */
  }

  /* Setas IDENTICAS as do banner (aparencia no bloco compartilhado no fim do arquivo) */
  .elementor-element-a0774c9 .mob-swiper-nav {
    width: 40px !important;
    height: 60px !important;
  }
  .elementor-element-a0774c9 .mob-swiper-nav.mob-prev { left: 10px !important; }
  .elementor-element-a0774c9 .mob-swiper-nav.mob-next { right: 10px !important; }

  /* Bolinhas (paginacao): oculta as originais do Elementor (roxas/a esquerda)
     e centraliza/recolore as novas geradas pelo Swiper reinicializado. */
  .elementor-element-a0774c9 .swiper-pagination:not(.mob-swiper-dots) {
    display: none !important;
  }
  /* Sobrescreve as VARIAVEIS do Swiper (o roxo vem daqui) */
  .elementor-element-a0774c9,
  .elementor-element-a0774c9 .mob-swiper-dots {
    --swiper-pagination-color: #3d92f6 !important;
    --swiper-theme-color: #3d92f6 !important;
    --swiper-pagination-bullet-inactive-color: #c6c6c6 !important;
    --swiper-pagination-bullet-inactive-opacity: 1 !important;
  }
  .elementor-element-a0774c9 .mob-swiper-dots {
    width: 100% !important;
    text-align: center !important;
    margin-top: 12px !important;
    line-height: 0;
  }
  .elementor-element-a0774c9 .mob-swiper-dots .swiper-pagination-bullet {
    margin: 0 5px !important;
  }
  /* Sobrescreve as regras roxas do Elementor (#8C74F2) com a MESMA
     especificidade + !important, cobrindo todas as bolinhas */
  .elementor-14 .elementor-element-a0774c9 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: #c6c6c6 !important;
    opacity: 1 !important;
  }
  .elementor-14 .elementor-element-a0774c9 .swiper-pagination-bullet-active {
    background-color: #3d92f6 !important;
  }
  /* Dots (paginacao) FORA do fluxo, logo ABAIXO do card. Assim a altura do host
     = altura do card, e as setas (top:50%) ficam sempre no centro do card,
     acompanhando a altura dinamica de cada depoimento. */
  .elementor-element-a0774c9 .mob-swiper-dots {
    position: absolute !important;
    top: 100% !important;                 /* na borda inferior do card */
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 12px !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
    .elementor-element-a0774c9 .mob-swiper-dots .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        background: #c7c9d9 !important; /* inativa: cinza claro */
        opacity: 1 !important;
        border-radius: 999px !important;
        transition: background .25s ease !important;
        border: #c7c9d9 !important;
    }
  .elementor-element-a0774c9 .mob-swiper-dots .swiper-pagination-bullet-active {
    background: #3d92f6 !important;   /* ativa: azul (igual as outras secoes) */
  }

  /* Card de DEPOIMENTOS apertado no texto (menos branco em volta), na proporcao
     do card do banner. Original em post-14.css era padding 50px em TODOS os lados
     -> reduz vertical E horizontal. */
  .elementor-14 .elementor-element-a0774c9 .elementor-main-swiper .swiper-slide {
    padding: 18px 22px !important;
  }

  /* Noticias: desfaz o "grid" (flex-wrap) para o Swiper funcionar como carrossel */
  #grid-noticias {
    flex-wrap: nowrap !important;
    display: flex !important;
  }
  /* Nao forcar a largura do slide: deixa o Swiper gerenciar (evita "travar") */
  #grid-noticias .swiper-slide {
    max-width: none !important;
  }

  /* NOTICIAS (ad810c1): 1 por vez (Swiper full width, sem corredores).
     O card branco fica mais estreito (centralizado) -> setas nas laterais fora. */
  .elementor-element-ad810c1 .mob-swiper-nav.mob-prev { left: 10px !important; }
  .elementor-element-ad810c1 .mob-swiper-nav.mob-next { right: 10px !important; }

  .elementor-element-ad810c1 .swiper-slide {
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* Card preenche o miolo (mesma largura do banner; corredores vem do host) */
  .elementor-element-ad810c1 .swiper-slide .elementor-122,
  .elementor-element-ad810c1 .swiper-slide .elementor-element-4fa40e37 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;      /* recorta a imagem nos cantos arredondados */
  }
  /* Altura FIXA do card -> nao muda de tamanho ao passar os slides */
  .elementor-element-ad810c1 .swiper-slide .elementor-element-4fa40e37 {
    height: 500px !important;   /* folga para a capa maior (250px) sem cortar o texto */
    display: flex !important;
    flex-direction: column !important;
  }
  /* Titulo limitado a 2 linhas (evita cards de alturas diferentes) */
  .elementor-element-ad810c1 #noticia-item-titulo {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .elementor-element-ad810c1 .swiper-slide .elementor-element-4fa40e37 > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  /* Container da imagem (e-con-full) nao pode ultrapassar o card */
  .elementor-element-ad810c1 .elementor-element-42afbaf1 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* Imagem: altura fixa e recorte (nao estica nem vaza) */
  .elementor-element-ad810c1 #noticia-item-img,
  .elementor-element-ad810c1 .elementor-element-808509b img {
    width: 100% !important;
    height: 250px !important;   /* capa MAIOR (era 190px) - igual ao modelo */
    object-fit: cover !important;
    display: block !important;
  }
  /* Bloco de texto com respiro interno + tudo centralizado */
  .elementor-element-ad810c1 .elementor-element-94f625c {
    padding: 16px 18px 20px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .elementor-element-ad810c1 .elementor-element-94f625c > * { width: 100% !important; }
  /* Data centralizada */
  .elementor-element-ad810c1 .elementor-element-262139fd .elementor-inline-items {
    justify-content: center !important;
  }
  /* Pilula da DATA menor (era font 15px / padding 10px 15px = ~39px de altura).
     Reduz fonte e padding para ficar compacta como no modelo. */
  .elementor-element-ad810c1 .elementor-element-262139fd .elementor-post-info__terms-list-item {
    padding: 5px 16px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
  .elementor-element-ad810c1 .elementor-element-262139fd .elementor-icon-list-item {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 12px !important;
  }
  /* Titulo centralizado */
  .elementor-element-ad810c1 #noticia-item-titulo { text-align: center !important; }
  /* Botao LEIA MAIS centralizado */
  .elementor-element-ad810c1 .elementor-element-1b706977 .elementor-button-wrapper {
      margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Botao LEIA MAIS menor e ESTREITO (nao ocupa a largura toda do card).
     width:auto + inline-flex = a pilula hugs o texto, como no modelo. */
  .elementor-element-ad810c1 .elementor-element-1b706977 .elementor-button {
    width: auto !important;
    display: inline-flex !important;
    padding: 7px 24px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .elementor-element-ad810c1 .elementor-element-1b706977 .elementor-button .elementor-button-text {
    font-size: 10px !important;
  }
  /* Titulo sem a altura fixa de 150px */
  .elementor-element-ad810c1 #noticia-item-titulo {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Setas IDENTICAS as do banner (aparencia no bloco compartilhado no fim do arquivo) */
  .elementor-element-ad810c1 .mob-swiper-nav {
    width: 40px !important;
    height: 60px !important;
  }
  /* Oculta a paginacao ORIGINAL do Elementor (fica a esquerda) */
  .elementor-element-ad810c1 .swiper-pagination:not(.mob-swiper-dots) {
    display: none !important;
  }
  /* Bolinhas centralizadas (metodo classico: bloco + text-align center) */
  /* Reserva espaco embaixo do card para as bolinhas absolutas */
  .elementor-element-ad810c1 .mob-swiper-host {
    position: relative !important;
    padding-bottom: 30px !important;
    padding-left: 44px !important;    /* mesmos corredores do banner-carousel-container */
    padding-right: 44px !important;
    box-sizing: border-box !important;
  }
  /* Bolinhas ancoradas no CENTRO GEOMETRICO (ignora margem residual) */
  .elementor-element-ad810c1 .mob-swiper-dots {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 0 !important;
  }
  .elementor-element-ad810c1 .mob-swiper-dots .swiper-pagination-bullet {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 5px !important;
    background: #c6c6c6 !important;
    opacity: 1 !important;
    border-radius: 999px !important;
  }
  .elementor-element-ad810c1 .mob-swiper-dots .swiper-pagination-bullet-active {
    background: #3d92f6 !important;
  }

  /* Botao "Ver todas as noticias" um pouco mais para BAIXO (item 5) */
  .elementor-14 .elementor-element-2406c23 {
    margin-top: 22px !important;
  }

  /* -------------------------------------------------------------------------
     ITEM 9 - PATROCINADORES: carrossel continuo em loop infinito (marquee).
     Nao para nem no clique (animacao CSS pura; Swiper e desativado pelo JS).
     ------------------------------------------------------------------------- */
  /* Remove a CAIXA BRANCA ao redor dos patrocinadores (item 6): containers
     transparentes, sem borda/arredondamento, colados no fundo cinza da pagina. */
  .elementor-14 .elementor-element-4d809824,
  .elementor-14 .elementor-element-6b56af34 {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Alarga a janela de exibicao (viewport) para quase a largura do bloco */
  .elementor-element-4db992b {
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-element-4db992b .elementor-image-carousel-wrapper.swiper,
  .elementor-element-4db992b .swiper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .elementor-element-4db992b .swiper-wrapper.mob-marquee {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    transition: none !important;
    animation: mobMarqueeSponsors 22s linear infinite !important;  /* mais rapido (item 6) */
    align-items: center;
  }
  .elementor-element-4db992b .swiper-wrapper.mob-marquee .swiper-slide {
    width: auto !important;
    flex: 0 0 auto;
    margin: 0 26px 0 0 !important;   /* menos espaco -> passam mais logos ao mesmo tempo */
  }
  .elementor-element-4db992b .swiper-wrapper.mob-marquee .swiper-slide img {
    max-height: 32px;                /* logos menores (item 6): era 46px */
    width: auto;
  }
  /* Entes Federativos ficou pequeno demais visualmente -> aumenta so este logo */
  .elementor-element-4db992b .swiper-wrapper.mob-marquee .swiper-slide img[src*="entes-federativos"] {
    max-height: 72px !important;
  }
  @keyframes mobMarqueeSponsors {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* =========================================================================
     ITEM 3 - Setas de DEPOIMENTOS e NOTICIAS identicas as do BANNER
     (Default.aspx .banner-carousel-container .carousel-arrow):
     chevron navy #010555 desenhado em CSS (quadrado 28px, traco 5px),
     sem fundo, no lugar do glifo de fonte. So estas duas secoes.
     ========================================================================= */
  .elementor-element-a0774c9 .mob-swiper-nav,
  .elementor-element-ad810c1 .mob-swiper-nav {
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    font-size: 0 !important;          /* esconde o glifo &#8249; / &#8250; */
    line-height: 0 !important;
    padding: 0 !important;
  }
  .elementor-element-a0774c9 .mob-swiper-nav::before,
  .elementor-element-ad810c1 .mob-swiper-nav::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    border-top: 5px solid #010555;
    border-left: 5px solid #010555;
    box-sizing: border-box;
  }
  .elementor-element-a0774c9 .mob-swiper-nav.mob-prev::before,
  .elementor-element-ad810c1 .mob-swiper-nav.mob-prev::before {
    transform: rotate(-45deg);   /* aponta para a esquerda "<" */
  }
  .elementor-element-a0774c9 .mob-swiper-nav.mob-next::before,
  .elementor-element-ad810c1 .mob-swiper-nav.mob-next::before {
    transform: rotate(135deg);   /* aponta para a direita ">" */
  }

  /* -------------------------------------------------------------------------
     RODAPE - redes sociais mais PARA CIMA (o topo do bloco tinha padding-top
     de 81px, criando um vao azul grande acima dos icones). Reduzimos esse vao
     mantendo um respiro para as informacoes (CNPJ/endereco/links) abaixo.
     ------------------------------------------------------------------------- */
  .elementor-element-d56bb61 {
    padding-top: 40px !important;
    
  }
}