/* Reseñas reales en tarjetas .webp 960×640: una banda que pasa sola, como un tren, sin flechas.
   reviews.js la mueve con transform (sin reflujos); aquí van el diseño, el desenfoque y el
   desvanecimiento de los laterales y la versión quieta para «reducir movimiento». */

/* Escritorio: tercera fila de la portada, a todo el ancho, bajo el texto y el vídeo. */
.hero-stage {
  grid-template-areas: "copy video" "more video" "reviews reviews";
  grid-template-rows: auto auto auto;
}
/* --reviews-bleed = padding del hero: la banda llega de borde a borde de la portada. */
.hero-stage > .reviews-showcase { grid-area: reviews; margin-top: 34px; --reviews-bleed: 40px; }

.reviews-showcase,
.offer-reviews {
  container-type: inline-size;
  min-width: 0;
  text-align: start;
}
.reviews-head { margin-bottom: 16px; }
.reviews-heading { min-width: 0; }
.reviews-title {
  margin: 0;
  color: var(--text-white);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.reviews-note {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.5;
}

/* La banda: marco sin máscara (lleva el foco y las capas de desenfoque) y, dentro, la ventana
   recortada con máscara de degradado por la que pasa la pista. */
.reviews-band {
  --reviews-fade: clamp(36px, 12%, 150px);
  --reviews-blur: 6px;
  --reviews-edge: #0e1725;
  position: relative;
  border-radius: 14px;
  /* El desplazamiento vertical de la página sigue funcionando; el horizontal arrastra la banda. */
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.reviews-band:active { cursor: grabbing; }
.reviews-band.is-focused { outline: 2px solid var(--accent); outline-offset: 3px; }
.reviews-viewport {
  /* Margen vertical para que la sombra de las tarjetas no quede cortada por el recorte. */
  padding-block: 2px 14px;
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--reviews-fade), #000 calc(100% - var(--reviews-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--reviews-fade), #000 calc(100% - var(--reviews-fade)), transparent 100%);
}
/* Desenfoque de los laterales: más fuerte en el borde y nulo hacia el centro. Lados físicos:
   el efecto es simétrico y no depende del sentido de lectura. */
.reviews-band::before,
.reviews-band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--reviews-fade);
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--reviews-blur));
  backdrop-filter: blur(var(--reviews-blur));
}
.reviews-band::before {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent);
  mask-image: linear-gradient(90deg, #000 30%, transparent);
}
.reviews-band::after {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent);
  mask-image: linear-gradient(270deg, #000 30%, transparent);
}
/* Sin backdrop-filter: solo desvanecimiento, con un degradado del color del fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .reviews-band::before { background: linear-gradient(90deg, var(--reviews-edge), transparent); }
  .reviews-band::after { background: linear-gradient(270deg, var(--reviews-edge), transparent); }
}

.reviews-track {
  --review-width: min(86cqi, 340px);
  --review-gap: 14px;
  display: flex;
  gap: var(--review-gap);
  width: max-content;
  /* Altura reservada antes de cargar las tarjetas: sin saltos de diseño. */
  min-height: calc(var(--review-width) * 2 / 3);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Capa propia en la GPU: mover la pista no repinta ni recoloca nada. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.reviews-track:focus { outline: none; }
.review-card {
  flex: 0 0 var(--review-width);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 14px;
  background: #0b1626;
  box-shadow: 0 0 0 1px rgba(141, 229, 255, .12) inset, 0 10px 28px rgba(0, 0, 0, .28);
}
.review-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Reducir movimiento: la banda no se mueve sola; se desplaza a mano, sin las copias del bucle. */
@media (prefers-reduced-motion: reduce) {
  .reviews-band { cursor: auto; touch-action: auto; }
  .reviews-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: calc(var(--reviews-fade) * .5);
    scrollbar-width: thin;
    scrollbar-color: #2d425b transparent;
  }
  .reviews-track {
    padding-inline: calc(var(--reviews-fade) * .5);
    transform: none !important;
    will-change: auto;
  }
  .review-card { scroll-snap-align: start; }
  .review-card[aria-hidden="true"] { display: none; }
}

@media (max-width: 1150px) {
  .hero-stage > .reviews-showcase { --reviews-bleed: 32px; }
}
@media (max-width: 900px) {
  .hero-stage > .reviews-showcase { margin-top: 0; --reviews-bleed: 28px; }
}
/* La banda de la portada sangra el padding del hero y llega a sus bordes. */
.hero-stage > .reviews-showcase .reviews-band {
  margin-inline: calc(var(--reviews-bleed) * -1);
  border-radius: 0;
}
/* Móvil: cada tarjeta mide ~290 px de ancho para que el texto de la imagen se lea, y asoma
   la siguiente que llega. */
@media (max-width: 680px) {
  .hero-stage > .reviews-showcase { --reviews-bleed: 24px; }
  .hero-stage > .reviews-showcase .reviews-track { --review-width: min(94cqi, 330px); --review-gap: 12px; }
  .hero-stage > .reviews-showcase .reviews-band { --reviews-fade: clamp(28px, 11%, 60px); --reviews-blur: 4px; }
}
@media (max-width: 380px) {
  .hero-stage > .reviews-showcase { --reviews-bleed: 19px; }
}

/* Tarjeta de la oferta: franja compacta de tres reseñas justo debajo del botón de pago (el botón
   queda donde estaba sin reseñas, dentro de la primera pantalla). Mismo tren, más pequeño. */
.offer-reviews { margin: 14px 0 12px; }
/* Título y nota en una sola línea (si caben) para que la franja sea compacta. */
.offer-reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  margin-bottom: 8px;
}
.offer-reviews-title {
  margin: 0;
  color: #d8ecf8;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.offer-reviews .reviews-band { --reviews-fade: clamp(20px, 10%, 56px); --reviews-blur: 3px; --reviews-edge: #101a2a; border-radius: 12px; }
.offer-reviews .reviews-track-compact { --review-width: min(70cqi, 224px); --review-gap: 10px; }
.offer-reviews .reviews-viewport { padding-block: 0; }
.offer-reviews .review-card { border-radius: 10px; box-shadow: 0 0 0 1px rgba(141, 229, 255, .12) inset; }
.offer-reviews .reviews-note { margin: 0; font-size: .7rem; }