/* Cinco estrellas con un clic (renilla-reservas). Del color de la web, con un pequeño salto y chispas al votar. */

.rr-valorar { --rr-oro: var(--azul, #1f4bff); display: grid; justify-items: center; gap: 0.35rem; margin: 2.5rem auto 0; padding: 1.6rem 1.25rem 1.4rem; max-width: 30rem; text-align: center; border: 1px solid var(--linea, rgba(11, 15, 25, 0.14)); border-radius: 1.4rem; background: color-mix(in srgb, var(--superficie, #fff) 70%, transparent); }
.rr-valorar__titulo { margin: 0 0 0.3rem; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta, #0b0f19); }
.rr-estrellas { display: flex; gap: 0.25rem; }
.rr-estrella { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--linea, rgba(11, 15, 25, 0.2)); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s; -webkit-tap-highlight-color: transparent; }
.rr-estrella svg { width: 2.3rem; height: 2.3rem; fill: currentColor; stroke: color-mix(in srgb, var(--tinta, #0b0f19) 25%, transparent); stroke-width: 0.6; overflow: visible; transition: filter 0.2s; }
.rr-estrella.es-on { color: var(--rr-oro); }
.rr-estrella.es-on svg { stroke: color-mix(in srgb, var(--rr-oro) 70%, #000); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rr-oro) 55%, transparent)); }
.rr-estrella:hover { transform: scale(1.18) rotate(-6deg); }
.rr-estrella:focus-visible { outline: 2px solid var(--azul, #1f4bff); outline-offset: 2px; border-radius: 50%; }
.rr-valorar.es-pop .rr-estrella.es-on { animation: rr-salto 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes rr-salto { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-12deg); } 100% { transform: scale(1); } }
.rr-chispa { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--rr-oro); pointer-events: none; animation: rr-chispa 0.65s ease-out forwards; }
@keyframes rr-chispa { to { transform: translate(var(--x), var(--y)) scale(0.2); opacity: 0; } }
.rr-valorar__etiqueta { min-height: 1.3em; margin: 0; font-weight: 500; color: var(--tenue, #474d59); }
.rr-valorar__caja { display: grid; gap: 0.6rem; width: 100%; margin-top: 0.6rem; animation: rr-caja 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.rr-valorar__caja[hidden] { display: none; }
@keyframes rr-caja { from { opacity: 0; transform: translateY(8px); } }
.rr-valorar__gracias { margin: 0; font-weight: 600; }
.rr-valorar__caja textarea { width: 100%; box-sizing: border-box; padding: 0.75rem 0.9rem; border: 1px solid var(--linea, rgba(11, 15, 25, 0.14)); border-radius: 0.9rem; background: var(--superficie, #fff); color: inherit; font: inherit; font-size: 16px; resize: vertical; }
.rr-valorar__mandar, .rr-valorar__google { justify-self: center; padding: 0.7rem 1.2rem; border: 0; border-radius: 999px; background: var(--tinta, #0b0f19); color: var(--fondo, #f2f2f0); font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.rr-valorar__google { background: var(--rr-oro); color: #fff; }
.rr-valorar__mandar:disabled { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .rr-valorar.es-pop .rr-estrella.es-on, .rr-valorar__caja { animation: none; } .rr-estrella:hover { transform: none; } }