/* ============================================================
   Embudo de reseñas — estilos de la vista del cliente (compartidos
   por el embudo real y por la vista previa del editor)
   ============================================================ */

.rf-card {
  --brand: #1E4A3A;
  background: #fff;
  width: 100%;
  max-width: 380px;
  border-radius: 1.5rem;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
}

.rf-logo {
  width: 96px; height: 96px; margin: 0 auto 1.5rem;
  border-radius: 1rem; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 2.6rem; color: #fff; background: var(--brand);
  overflow: hidden;
}
.rf-logo img { width: 100%; height: 100%; object-fit: cover; }

.rf-title {
  font-size: 1.4rem; font-weight: 700; line-height: 1.25; margin-bottom: 1.75rem;
}
.rf-sub { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin-bottom: 1.5rem; }

/* estrellas */
.rf-stars { display: flex; justify-content: center; gap: 0.35rem; }
.rf-star {
  background: none; border: none; cursor: pointer; padding: 0.1rem;
  font-size: 2.6rem; line-height: 1; color: #d8d8d8; transition: color 0.12s, transform 0.12s;
}
.rf-star:hover { transform: scale(1.12); }
.rf-star.on { color: #F5B301; }

/* botón de plataforma (Google) */
.rf-plat {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.85rem 1rem; border: 1.5px solid #e3e3e3; border-radius: 0.75rem;
  background: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; color: #1a1a1a;
  text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.rf-plat:hover { border-color: #c4c4c4; box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.rf-plat svg { width: 22px; height: 22px; flex-shrink: 0; }

/* formulario interno (reseña negativa) */
.rf-form { display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.rf-form input, .rf-form textarea {
  width: 100%; padding: 0.7rem 0.85rem; border: 1.5px solid #e3e3e3; border-radius: 0.6rem;
  font: inherit; font-size: 0.95rem; background: #fafafa; color: #1a1a1a; resize: vertical;
}
.rf-form input:focus, .rf-form textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.rf-row2 { display: flex; gap: 0.6rem; }
.rf-row2 > * { flex: 1; min-width: 0; }
.rf-send {
  width: 100%; padding: 0.85rem; border: none; border-radius: 0.75rem;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
  margin-top: 0.25rem; transition: filter 0.15s;
}
.rf-send:hover { filter: brightness(1.08); }
.rf-send:disabled { opacity: 0.55; cursor: default; }
.rf-public {
  display: block; text-align: center; margin-top: 0.9rem; font-size: 0.85rem;
  color: #888; text-decoration: underline; cursor: pointer; background: none; border: none; width: 100%;
}
.rf-err { color: #c0392b; font-size: 0.82rem; min-height: 1em; }

/* pantalla de gracias */
.rf-thanks-icon {
  width: 76px; height: 76px; margin: 0 auto 1.25rem; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 2.4rem;
  display: flex; align-items: center; justify-content: center;
}

.rf-powered { margin-top: 1.5rem; font-size: 0.72rem; color: #b8b8b8; }