/* ==========================================================================
   style.css — estilos PROPIOS de la landing /lp/vsl-amazon/
   Solo clases con prefijo `lp-`. Todo lo demás viene de /assets/css/luna.css.
   Regla: si un estilo sirve para más de una landing, va a luna.css, no acá.
   ========================================================================== */

/* Contenedor de una sección con fondo ambiente (.ambient).
   El contrato de luna.css pide que el padre de .ambient tenga
   position:relative + isolation:isolate + overflow:hidden. Lo garantizamos acá
   para no depender de que .section--hero lo haga por sí mismo. */
.lp-ambient-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Reserva de altura del player para evitar CLS mientras carga VTurb (16:9). */
.lp-video-16x9 {
  aspect-ratio: 16 / 9;
}

/* Avatar placeholder de testimonios: círculo con gradiente dorado e inicial.
   Reemplazar por <img> reales cuando haya fotos con autorización. */
.lp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--gold-gradient);
  color: var(--bg-0);
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: 0;
}

/* Cabecera del testimonio: avatar + autor en línea. */
.lp-testimonial-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* Lista "qué incluye" dentro de la oferta: dos columnas en desktop. */
.lp-includes {
  display: grid;
  gap: 10px 24px;
}
@media (min-width: 640px) {
  .lp-includes {
    grid-template-columns: 1fr 1fr;
  }
}

/* Etiqueta de resultado dentro de cada testimonio ("Ejemplo ilustrativo"). */
.lp-tag {
  display: inline-block;
  /* .testimonial es flex column con align-items:stretch: sin esto la píldora
     se blockifica y se estira de borde a borde de la tarjeta. */
  align-self: flex-start;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  margin-top: 10px;
}