/* ---------------------------------------------------------------
   Antes e depois (#antes-e-depois)
   A foto "depois" fica embaixo; a "antes" por cima, recortada por
   clip-path até --pos. O <input range> cobre tudo, invisível, e é
   quem recebe arraste, toque e teclado.
   --------------------------------------------------------------- */

.rb-ad {
  padding: 70px 20px 80px;
  text-align: center;
}

.rb-ad__titulo {
  margin: 0 0 12px;
  font-family: "Garet", Sans-serif;
  font-size: 36px;
  font-weight: normal;
  line-height: 1.2;
  color: #3E3B3F;
}
.rb-ad__titulo b {
  color: #DB4C23;
}

.rb-ad__intro {
  margin: 0 0 40px;
  font-size: 16px;
  color: #6C696B;
}

.rb-ad__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
  max-width: 1140px;
  margin: 0 auto;
}

.rb-ad__card {
  margin: 0;
}

/* Número ímpar de casos: o último ocupa a linha inteira, centralizado
   na largura de um card, em vez de ficar sozinho à esquerda. */
.rb-ad__card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 16px);
}

.rb-ad__comparador {
  --pos: 50%;
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  overflow: hidden;
  background: #EDE9E7;
}

.rb-ad__comparador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.rb-ad__antes {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Linha e puxador desenhados no próprio comparador: um elemento a menos
   no HTML e nada para o leitor de tela anunciar. */
.rb-ad__comparador::before,
.rb-ad__comparador::after {
  content: "";
  position: absolute;
  left: var(--pos);
  pointer-events: none;
  transform: translateX(-50%);
}
.rb-ad__comparador::before {
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}
.rb-ad__comparador::after {
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: #DB4C23 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
  border: 3px solid #fff;
  box-shadow: var(--ribondi-hover-sombra);
}

.rb-ad__comparador:focus-within::after {
  outline: 3px solid #3E3B3F;
  outline-offset: 2px;
}

.rb-ad__controle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  /* Deixa a rolagem vertical passar no celular; só o arraste lateral é do controle. */
  touch-action: pan-y;
}

.rb-ad__rotulo {
  position: absolute;
  top: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(62, 59, 63, .75);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}
.rb-ad__rotulo--antes  { left: 16px; }
.rb-ad__rotulo--depois { right: 16px; background: rgba(219, 76, 35, .9); }

.rb-ad__nome {
  margin: 18px 0 0;
  font-size: 20px;
  line-height: 1.3;
  color: #3E3B3F;
}

.rb-ad__cta {
  margin: 48px 0 0;
}

.rb-ad__nota {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6C696B;
}

@media (max-width: 767px) {
  .rb-ad {
    padding: 50px 16px 60px;
  }
  .rb-ad__titulo {
    font-size: 30px;
  }
  .rb-ad__grade {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .rb-ad__card:last-child:nth-child(odd) {
    justify-self: stretch;
    width: auto;
  }
  .rb-ad__comparador {
    border-radius: 18px;
  }
}