.rating {
    unicode-bidi: bidi-override;
    direction: rtl; /* truco para invertir el orden */
    font-size: 40px;
	align-self: center;
    display: inline-flex;
  }

  .rating a {
    color: transparent;               /* ocultamos el color del texto */
    text-decoration: none;
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

  /* Estrella vacía (borde dorado simulado con sombra) */
  .rating a::before {
    content: "☆";                      /* estrella vacía */
    color: #C59D26;                /* color del borde */
    position: absolute;
    left: 0;
    top: 0;
  }

  /* Hover: estrella rellena */
  .rating a:hover::before,
  .rating a:hover ~ a::before {
    content: "★";                      /* estrella rellena */
    color: #C59D26;
  }