/* Secao de depoimentos com tres videos no desktop e destaque central no mobile. */
.testimonials-section {
  padding: 120px 0 112px;
}

/* Container principal alinhado a mesma largura das secoes desktop amplas. */
.testimonials-shell {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

/* Layout desktop com galeria a esquerda e mensagem a direita. */
.testimonials-layout {
  display: flex;
  align-items: center;
  gap: 64px;
}

/* Agrupa os tres videos lado a lado seguindo o frame desktop. */
.testimonials-videos {
  display: flex;
  align-items: center;
  gap: 25px;
}

/* Card de video com raio e proporcao identicos ao Figma. */
.testimonials-card {
  position: relative;
  width: 242px;
  aspect-ratio: 9 / 16;
  border-radius: 29px;
  overflow: hidden;
  flex: 0 0 242px;
  background: #0f172a;
}

/* A capa continua visivel ate o clique. */
.testimonials-card__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transition: opacity 240ms ease;
}

/* Imagem cobre o card inteiro sem distorcer o retrato. */
.testimonials-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Play fica centralizado sobre a midia como no frame. */
.testimonials-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icone do play respeita o tamanho exato do asset desktop. */
.testimonials-card__play img {
  width: 44px;
  height: 44px;
  display: block;
}

.testimonials-card__cover:focus-visible {
  outline: 4px solid rgba(87, 212, 255, 0.9);
  outline-offset: -6px;
}

/* O iframe assume o lugar da capa no clique. */
.testimonials-card__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000000;
  opacity: 0;
  transition: opacity 240ms ease;
}

.testimonials-card__iframe[hidden] {
  display: none;
}

.testimonials-card.is-playing .testimonials-card__cover {
  pointer-events: none;
  opacity: 0;
}

.testimonials-card.is-playing .testimonials-card__iframe {
  opacity: 1;
}

/* Bloco de texto com largura restrita e centralizacao vertical. */
.testimonials-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Titulo em gradiente com as enfases em bold preservadas. */
.testimonials-title {
  width: 440px;
  margin: 0;
  font-family: "Muring Text", system-ui, sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.356;
  letter-spacing: 0.76px;
  background: linear-gradient(153.34deg, #57d4ff 0%, #845cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Enfases do titulo desktop. */
.testimonials-title strong {
  font-family: "Muring Display", system-ui, sans-serif;
  font-weight: 700;
}

/* Bloco mobile fica escondido fora do breakpoint menor. */
.testimonials-mobile {
  display: none;
}

/* Tablet: empilha titulo e videos sem criar um layout arbitrario novo. */
@media (max-width: 1024px) {
  .testimonials-section {
    padding: 96px 0 96px;
  }

  .testimonials-shell {
    width: min(100%, calc(100% - 40px));
  }

  .testimonials-layout {
    flex-direction: column-reverse;
    gap: 32px;
  }

  .testimonials-title {
    width: min(720px, 100%);
    font-size: 34px;
    letter-spacing: 0.68px;
    text-align: center;
  }

  .testimonials-videos {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Mobile: titulo central, card principal no meio e laterais aparecendo como recorte. */
@media (max-width: 480px) {
  .testimonials-section {
    padding: 66px 0 90px;
    overflow: hidden;
  }

  .testimonials-shell {
    width: 100%;
  }

  .testimonials-layout {
    display: none;
  }

  .testimonials-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 10px 0;
  }

  .testimonials-title--mobile {
    width: 327px;
    font-family: "Muring Display", system-ui, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.356;
    letter-spacing: 0.56px;
    text-align: center;
  }

  .testimonials-carousel {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden;
  }

  .testimonials-carousel__track {
    display: flex;
    gap: 25px;
    height: 100%;
    padding: 0 calc(50% - 121px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .testimonials-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .testimonials-card--mobile {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .testimonials-card--clone {
    pointer-events: none;
  }

  .testimonials-card__cover:focus-visible {
    outline-width: 3px;
    outline-offset: -4px;
  }

  .testimonials-cta {
    width: 272.308px;
    height: 66.294px;
    padding: 12.43px;
    gap: 7.136px;
    margin-top: 2px;
  }

  .testimonials-cta__label {
    width: 198.879px;
    font-size: 14.92px;
    letter-spacing: 0.2984px;
  }

  .testimonials-cta__icon,
  .testimonials-cta__icon img {
    width: 41.433px;
    height: 41.433px;
    flex-basis: 41.433px;
  }
}