/* Noctiluma · estilos de los componentes que comparten las páginas: la luz del viaje, el polvo mágico, el polvito al tocar (pixie)
 * y el "quieto" de las animaciones fuera de pantalla. UNA sola vez.
 *
 * FUENTE ÚNICA. Se edita SOLO en comun/ y se copia idéntico a panel/ y portal/ con: sh comun/sincronizar.sh
 * Cada página lo carga después de marca.css y antes de sus propios estilos. Usa los colores de marca.css.
 */
.luz{position:relative;height:8px;border-radius:8px;background:#ece4f6}
.luz > i{position:absolute;inset:0;border-radius:8px;background:linear-gradient(90deg,var(--lila),var(--medio) 55%,var(--tinta))}
.luz.plena{animation:resplandor 3.2s ease-in-out infinite}
.luz.plena > i{background:linear-gradient(90deg,var(--lila),var(--medio) 45%,var(--tinta) 80%,#6b5fc4)}
@keyframes resplandor{0%,100%{box-shadow:0 0 0 2px rgba(213,174,138,.18),0 0 8px rgba(213,174,138,.35)}50%{box-shadow:0 0 0 3px rgba(213,174,138,.28),0 0 18px rgba(232,200,160,.7)}}
.polvo{position:absolute;inset:-9px -4px;pointer-events:none;z-index:2}
.polvo i{position:absolute;opacity:0;transform:translate(-50%,-50%) scale(.1);animation:pixie 3s ease-in-out infinite}
.polvo i::before{content:"";position:absolute;inset:0;background:var(--c)}
.polvo .pe{background:radial-gradient(circle,var(--c) 0,transparent 55%);opacity:.8}
.polvo .pe::before{clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.polvo .pd::before{border-radius:50%;box-shadow:0 0 3px var(--c)}
@keyframes pixie{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(25deg)}30%{opacity:.4;transform:translate(-50%,-46%) scale(.6) rotate(40deg)}46%{opacity:1;transform:translate(-50%,-42%) scale(1) rotate(60deg)}74%{opacity:0;transform:translate(-50%,-34%) scale(.2) rotate(90deg)}}
.luz-pie{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--gris)}
.luz-pie b{color:var(--tinta)}
.nl-quieto,.nl-quieto *,.nl-quieto::before,.nl-quieto::after,.nl-quieto *::before,.nl-quieto *::after{animation-play-state:paused!important}
/* polvo de hadas al calificar con 4 o 5 */
.pixie{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.pixie i{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;opacity:0;animation:pd var(--t) cubic-bezier(.2,.7,.3,1) var(--d) forwards}
.pixie .pd-dorado{background:#ecd0aa;box-shadow:0 0 6px 1px rgba(236,208,170,.85)}
.pixie .pd-lila{background:#dcc1fb;box-shadow:0 0 6px 1px rgba(212,174,252,.85)}
.pixie .pd-estrella{width:10px;height:10px;margin:-5px;border-radius:0;background:#f3dfc6;clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);filter:drop-shadow(0 0 3px rgba(255,236,200,.9))}
@keyframes pd{0%{opacity:0;transform:translate(0,0) scale(.2)}14%{opacity:1}60%{opacity:.95;transform:translate(var(--dx),var(--dy)) scale(var(--s)) rotate(40deg)}100%{opacity:0;transform:translate(calc(var(--dx) * 1.12),calc(var(--dy) + var(--caida))) scale(calc(var(--s) * .5)) rotate(90deg)}}

/* Las estrellitas de la reseña y del "¿cómo viene?" (el HTML lo arma NL.RESENA.estrellasHTML, en comun/resena.js) */
.estrellas{position:relative;display:flex;gap:6px;justify-content:center}
.est{position:relative;border:0;background:none;padding:3px;cursor:pointer;line-height:0;border-radius:10px;-webkit-tap-highlight-color:transparent}
.est svg{display:block;overflow:visible}
.est .e-base{fill:#faf7fe;stroke:#cdbfe8;stroke-width:1.1;stroke-linejoin:round;transition:stroke .3s ease}
.est .e-on{opacity:0;transform-origin:12px 12px;transform:scale(.7);transition:opacity .35s ease,transform .45s cubic-bezier(.22,.8,.24,1)}
.est.on .e-on{opacity:1;transform:none}
.est.on .e-base{stroke:transparent}
.est.previa .e-on{opacity:.55}
.est:hover .e-base{stroke:#b3a6d9}
.est:focus-visible{outline:2px solid var(--medio);outline-offset:1px}
.estrellas.elegido .est.on .e-on{transition-delay:calc(var(--i) * 55ms)}
.estrellas.elegido .est.on{animation:est-asienta .6s cubic-bezier(.22,.8,.24,1) calc(var(--i) * 55ms) both}
@keyframes est-asienta{0%{transform:translateY(0)}40%{transform:translateY(-2px)}100%{transform:none}}
/* con 4 o 5: un brillo que cruza una sola vez */
.estrellas.brillo::after{content:"";position:absolute;inset:-4px -8px;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 48%,rgba(255,244,228,.6) 52%,transparent 70%) no-repeat;background-size:250% 100%;background-position:120% 0;mix-blend-mode:soft-light;animation:est-brillo 1.1s ease .35s both}
@keyframes est-brillo{to{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.estrellas.elegido .est.on,.estrellas.brillo::after{animation:none}.est .e-on{transition:opacity .2s}}

/* El formulario de reseña (el HTML lo arma NL.RESENA.camposHTML, en comun/resena.js) */
.res-c{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.res-c i{font-style:normal;font-weight:700;letter-spacing:0;text-transform:none;color:#bdb2dc}
.res-c input,.res-c textarea{min-height:48px;padding:11px 13px;border:1px solid var(--borde);border-radius:13px;background:#fcfaff;font:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:var(--tinta);resize:vertical}
.res-c textarea{min-height:0}
.res-c input:focus,.res-c textarea:focus{outline:none;border-color:var(--medio);background:#fff}
.res-chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.res-chk input{width:18px;height:18px;margin-top:1px;accent-color:var(--tinta)}
.res-ya{margin:-4px 0 0;font-size:12.5px;color:var(--medio);font-weight:700}
.res-fotos{display:flex;align-items:center;gap:8px;margin-top:6px;padding:10px 14px;border-radius:14px;border:1px dashed var(--lila);background:#fcfaff;color:var(--tinta);font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer}
.res-fotos:hover{background:#f6f1fd}
.quienes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.quien{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;border:1px solid var(--lila);background:#fff;color:var(--tinta);font:700 13px var(--f-texto);letter-spacing:0;text-transform:none;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.quien:hover{background:#f6f1fd}
.quien.on{background:var(--tinta);border-color:var(--tinta);color:#fff;transform:scale(1.03)}
.quien.ya{border-style:dashed;border-color:#cfe3d6;background:#f3faf5;color:#5f9b7a;cursor:default}