/* RIBONDI — carrossel sem Swiper.

   O trilho vira um flex container que rola no eixo x com scroll-snap. Isso
   entrega arraste no touch, inercia e navegacao por teclado sem uma linha de
   JS: o navegador ja faz. O rb-carousel.js so cuida de setas, bullets e
   autoplay.

   As duas variaveis sao escritas pelo JS a partir dos data-rb-*, para a
   largura do item sair de conta e nao de media query. */

[data-rb-carousel] .swiper-wrapper,
[data-rb-carousel] .eael-flip-container{
  display: flex;
  gap: var(--rb-vao, 10px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Sem scroll-behavior aqui de proposito. Quem decide se a rolagem e suave e
     o rb-carousel.js, que passa `behavior` em cada scrollTo e ja respeita o
     prefers-reduced-motion. Declarar smooth no CSS tambem faria a atribuicao
     direta `trilho.scrollLeft = alvo` animar - e ela existe justamente como
     caminho instantaneo para navegador sem scrollTo. Duas fontes de verdade
     para o mesmo movimento, e a do CSS vencendo onde nao devia. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* O trilho do flip vem de um <ul> do Essential Addons. */
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-rb-carousel] .swiper-wrapper::-webkit-scrollbar,
[data-rb-carousel] .eael-flip-container::-webkit-scrollbar{
  display: none;
}

[data-rb-carousel] .swiper-slide,
[data-rb-carousel] .eael-flip-item{
  /* Cada item ocupa (100% - vaos) / quantidade. Com --rb-por-vez=1 isso da a
     largura cheia; com 3, um terco descontando os dois vaos do meio. */
  flex: 0 0 calc(
    (100% - var(--rb-vao, 10px) * (var(--rb-por-vez, 1) - 1))
    / var(--rb-por-vez, 1)
  );
  scroll-snap-align: start;
}

/* Nao ha bloco de prefers-reduced-motion aqui: quem respeita a preferencia e o
   rb-carousel.js, que desliga o autoplay e passa behavior:'auto' no scrollTo.
   Repetir a regra no CSS so criaria a chance de os dois discordarem. */


/* ---------------------------------------------------------------
   Carrossel da clinica (9031012)

   As nove fotos sao 1600x2133 - retrato, 3:4. O Elementor cravava
   .elementor-main-swiper{height:338px} e pintava cada foto como
   background-size:cover num retangulo de 1140x338. O resultado era uma fatia
   horizontal fina no meio de uma foto vertical: nao dava para ver comodo
   nenhum da clinica.

   A altura fixa sai e entra proporcao 3:4, que e a da foto. Com tres por vez
   num container de 1140px cada uma fica com ~370x495 - retrato de verdade.
   --------------------------------------------------------------- */
.elementor-1616 .elementor-element.elementor-element-9031012 .elementor-main-swiper{
  height: auto;
}
[data-rb-carousel] .swiper-slide .elementor-carousel-image{
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 6px;
}


/* ---------------------------------------------------------------
   Carrossel de tratamentos (bfc8751)

   Vinha do flip carousel do Essential Addons, cujo JS foi removido com o
   Elementor. Sem ele e sem CSS proprio, os cinco <li> viraram uma pilha
   vertical de 5041px de altura, cada imagem no tamanho natural.

   object-fit e `contain`, nao `cover`: sao colagens de antes e depois, com os
   rotulos ANTES e DEPOIS nas bordas. Recortar para preencher cortaria
   justamente o que explica a foto. Uma das cinco e 3:4 e as outras 1:1, entao
   `contain` deixa uma faixa lateral nela - preferivel a mutilar a imagem.
   --------------------------------------------------------------- */
[data-rb-carousel] .eael-flip-item{
  margin: 0;
  text-align: center;
}
[data-rb-carousel] .eael-flip-item img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  display: block;
}
[data-rb-carousel] .flip-carousel-text{
  margin: 12px 0 0;
}

/* As setas do flip nascem no HTML, nao no JS do plugin. Ficam sob o trilho
   para nao cobrir a foto - sao colagens, e tapar um canto atrapalha a leitura. */
.rb-setas{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}
.rb-setas .elementor-swiper-button{
  position: static;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: none;
  cursor: pointer;
  transform: none;
}
.rb-setas .elementor-swiper-button:hover,
.rb-setas .elementor-swiper-button:focus-visible{
  background: rgba(0, 0, 0, .06);
}

/* Bullets: o markup do Elementor ja trazia o container no carrossel da
   clinica, mas o do flip nasceu sem. Como os dois usam a mesma classe, o
   estilo vale para ambos e fica declarado uma vez so. */
[data-rb-carousel] .swiper-pagination{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  position: static;
}
[data-rb-carousel] .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #DB4C23;
  background: none;
  opacity: 1;
  padding: 0;
  cursor: pointer;
  transition: background-color .2s ease;
}
[data-rb-carousel] .swiper-pagination-bullet-active{
  background: #DB4C23;
}
@media (prefers-reduced-motion: reduce){
  [data-rb-carousel] .swiper-pagination-bullet{ transition: none; }
}

/* A secao de tratamentos nao e "boxed" como o resto da pagina: o container do
   Elementor ali tem a largura da viewport, e por isso o carrossel encostava na
   borda esquerda e o terceiro item ficava cortado na direita.

   Quem se alinha a coluna de 1140px e o TRILHO, nao o bloco. O bloco carrega a
   faixa cinza de fundo (background-color do widget) e precisa continuar
   sangrando de ponta a ponta - limita-lo cortava a faixa no meio da tela e
   deixava o lado direito com o marmore aparecendo, pior do que o problema
   original. */
.eael-flip-carousel[data-rb-carousel] .eael-flip-container,
.eael-flip-carousel[data-rb-carousel] .swiper-pagination,
.eael-flip-carousel[data-rb-carousel] .rb-setas{
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
/* O respiro lateral no mobile vai no BLOCO, nunca no trilho. Padding dentro de
   um container que rola desloca a origem do scroll: com padding-left:20px no
   <ul>, scrollLeft=0 ja mostra 20px de recuo, e todas as contas de posicao
   passam a errar por exatamente esses 20px - medido, o next parava em 485 onde
   o item 2 comeca em 465. Como padding fica DENTRO da caixa de fundo, poe-lo
   no bloco nao corta a faixa cinza. */
@media (max-width: 1199px){
  .eael-flip-carousel[data-rb-carousel]{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------------------------------------------------------------
   Estado travado (rb-pin.js, so >= 1024px)

   Enquanto o GSAP conduz o trilho por transform, a rolagem nativa e o
   scroll-snap precisam sair de cena: os dois disputariam o mesmo eixo e o
   resultado seria o carrossel brigando consigo mesmo.

   As setas e os bullets somem porque ali a ROLAGEM e a navegacao. Deixa-los
   convida a um clique que compete com o scroll e desalinha o scrub.

   A classe so existe depois de o GSAP carregar com sucesso - se o arquivo
   falhar, nada disto vale e o carrossel nativo continua no ar.
   --------------------------------------------------------------- */
/* O trilho fica MAIS LARGO que a tela de proposito - e ele que anda. Isso
   obriga o bloco a recortar: sem recorte, a largura extra infla o documento e
   a pagina inteira ganha rolagem horizontal (medido: 683px a mais em 1440).

   `clip` e nao `hidden`: hidden cria um contexto de rolagem, e contexto de
   rolagem num ancestral quebra o position:fixed que o GSAP usa para pinar.
   clip recorta sem criar contexto. */
[data-rb-carousel].rb-pinned{
  overflow-x: clip;
}
[data-rb-carousel].rb-pinned .eael-flip-container{
  overflow: visible;
  scroll-snap-type: none;
  width: max-content;
  max-width: none;
}
[data-rb-carousel].rb-pinned .eael-flip-item{
  scroll-snap-align: none;
  /* Largura fixa em vez de fracao do container: com width:max-content o
     container deixa de ter largura propria para dividir. */
  flex: 0 0 var(--rb-item-w, 30vw);
}
[data-rb-carousel].rb-pinned .swiper-pagination,
[data-rb-carousel].rb-pinned .rb-setas{
  display: none;
}