/* =====================================================================
   POP UP "RESEÑA EN GOOGLE" (carta.html)
   ---------------------------------------------------------------------
   La base (fondo, tarjeta, botones, X, botón flotante) está en
   css/secciones/18-popup.css. Aquí solo va lo propio de la reseña:
     1. Foto con "5 ★★★★★"
     2. Estrellas que se pintan y chispitas
     3. Mensaje que cambia según la nota
   ===================================================================== */


/* ---------- 1. Foto con "5 ★★★★★" ---------- */
.resena__foto { position: relative; overflow: hidden; background: var(--negro); }
.resena__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoom-lento 9s ease-in-out infinite alternate;
}
.resena__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 9, 8, .1), rgba(11, 9, 8, .75)); }

.resena__foto-pie {
  position: absolute;
  left: 22px; right: 22px; bottom: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
}
.resena__foto-pie > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.resena__cinco { font-size: 54px; font-weight: 300; line-height: 1; letter-spacing: -1px; }
.resena__mini-estrellas { color: var(--cobre); font-size: 14px; letter-spacing: 2px; }
.resena__con-carino { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; }


/* ---------- 2. Estrellas ---------- */
.resena__estrellas { position: relative; display: inline-flex; align-self: flex-start; gap: 10px; padding: 4px 0; }

.estrella {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .2s ease;
}
.estrella:hover { transform: translateY(-3px) scale(1.12); }
.estrella svg { width: 100%; height: 100%; display: block; }

/* Estrella apagada: solo el contorno, que se "dibuja" al abrir el pop up */
.estrella path {
  fill: transparent;
  stroke: #6E6660;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-dasharray: 70;
  animation: dibujar-estrella 1s ease both;
  transition: fill .25s ease, stroke .25s ease;
}
.estrella:nth-child(1) path { animation-delay: .47s; }
.estrella:nth-child(2) path { animation-delay: .59s; }
.estrella:nth-child(3) path { animation-delay: .71s; }
.estrella:nth-child(4) path { animation-delay: .83s; }
.estrella:nth-child(5) path { animation-delay: .95s; }
@keyframes dibujar-estrella { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }

/* Estrella encendida (la clase la pone js/resena.js) */
.estrella--encendida { animation: saltar-estrella .45s ease; }
.estrella--encendida path { fill: var(--cobre); stroke: var(--cobre); }
@keyframes saltar-estrella { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }

/* Chispitas */
.resena__chispas { position: absolute; width: 0; height: 0; pointer-events: none; }
.chispa {
  position: absolute;
  left: -3.5px; top: -3.5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cobre);
  animation: chispa .8s ease-out both;
}
.chispa--clara { background: var(--texto); }
@keyframes chispa {
  0%   { opacity: 1; transform: translate(0, 0) scale(.4); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}


/* ---------- 3. Mensaje ---------- */
.resena__mensaje { min-height: 22px; font-size: 15px; font-weight: 600; color: var(--texto); }
.resena__mensaje--nuevo { animation: subir .4s ease both; }


/* ---------- Celular ---------- */
@media (max-width: 700px) {
  .resena__estrellas { gap: 6px; }
  .estrella { width: 38px; height: 38px; }
  .resena__cinco { font-size: 40px; }
}