/* Reseñas en la ficha. Mismo lenguaje visual que el resto del sitio: fondo
   negro, oro para lo que importa, gris cálido para el texto. */

.resenas {
  margin: 44px 0 10px;
  padding-top: 30px;
  border-top: 1px solid rgba(232, 179, 61, .22);
}

.resenas__titulo {
  margin: 0 0 14px;
  font-size: 22px;
  color: #F5F0E6;
}

.resenas__promedio {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 18px;
  color: #A9A29A; font-size: 15px;
}
.resenas__promedio strong { color: #F5F0E6; font-size: 19px; }

.resenas__estrellas { color: #E8B33D; letter-spacing: 1px; }

.resenas__ninguna {
  margin: 0 0 20px;
  color: #A9A29A;
  font-size: 15px;
  max-width: 52ch;
}

/* --- la lista --- */

.resenas__lista { list-style: none; margin: 0 0 26px; padding: 0; }

.resena {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(232, 179, 61, .14);
  border-radius: 12px;
}

.resena__cabeza {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px;
}
.resena__autor { color: #F5F0E6; font-size: 15px; }
.resena__texto {
  margin: 0;
  color: #D6CFC5; font-size: 15px; line-height: 1.55;
  /* lo escribe un desconocido: que una palabra larguísima no rompa la caja */
  overflow-wrap: anywhere;
}

/* Solo para lectores de pantalla: las estrellas van con aria-hidden porque
   "★★★★☆" se lee como una ristra de símbolos. */
.resena__sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- el formulario --- */

.resenas__form {
  padding: 18px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(232, 179, 61, .2);
  border-radius: 14px;
  max-width: 560px;
}

.resenas__form label { display: block; margin: 12px 0 5px; color: #A9A29A; font-size: 14px; }

.resenas__form input[type="text"],
.resenas__form input:not([type]),
.resenas__form textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px;
  background: rgba(0, 0, 0, .66);
  border: 1px solid rgba(232, 179, 61, .32);
  border-radius: 10px;
  color: #F5F0E6; font: inherit; font-size: 16px;   /* 16px: iOS no hace zoom */
}

.resenas__form textarea { resize: vertical; min-height: 92px; }

.resenas__form button {
  margin-top: 14px;
  padding: 13px 26px;
  background: #E8B33D; color: #1a1206;
  border: 0; border-radius: 12px;
  font: inherit; font-weight: 700; font-size: 16px;
  cursor: pointer;
}
.resenas__form button:hover { background: #f3c45c; }

/* El puntaje: radios de verdad, para que ande sin JavaScript. */
.resenas__puntaje { border: 0; padding: 0; margin: 0 0 4px; }
.resenas__puntaje legend { color: #A9A29A; font-size: 14px; padding: 0; }

.resenas__radio { display: inline-flex; align-items: center; gap: 6px; margin: 8px 14px 0 0; }
.resenas__radio span { color: #E8B33D; letter-spacing: 1px; font-size: 17px; }
.resenas__radio input { accent-color: #E8B33D; width: 18px; height: 18px; }

.resenas__ayuda { margin: 12px 0 0; color: #8B857E; font-size: 13px; line-height: 1.5; }

/* 🚨 El campo trampa. Fuera de la pantalla y no display:none: algunos bots
   saltean lo que está oculto con display, pero completan esto igual. */
.resenas__trampa {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* El aviso de después de enviar */
.resenas__aviso {
  margin: 0 0 14px; padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
}
.resenas__aviso--ok {
  background: rgba(232, 179, 61, .12);
  border: 1px solid rgba(232, 179, 61, .4);
  color: #F5F0E6;
}
.resenas__aviso--error {
  background: rgba(220, 80, 80, .12);
  border: 1px solid rgba(220, 80, 80, .45);
  color: #F3D6D6;
}

/* Las estrellas en las tarjetas de los listados */
.tarjeta__puntaje { color: #E8B33D; font-size: 13px; white-space: nowrap; }

@media (max-width: 480px) {
  .resenas { margin-top: 32px; }
  .resenas__form { padding: 14px; }
}