/* =========================================================
   Funky Maker · foto → personaje → figura
   ---------------------------------------------------------
   Capa propia. Se carga DESPUÉS de style.css y solo añade
   clases nuevas con prefijo .fm-, sin tocar el sitio actual.
   Reutiliza los tokens de marca (--pink, --lime, --ink…).
   ========================================================= */

:root {
  --fm-morado:      #a78bfa;
  --fm-morado-2:    #8b5cf6;
  --fm-fondo-1:     #8b1178;   /* foco del degradado */
  --fm-fondo-2:     #12010c;   /* casi negro de los bordes */
  --fm-tarjeta:     #fbfaf9;   /* el blanco roto de las tarjetas */
  --fm-tarjeta-ink: #1a1420;
}

/* Fondo característico: foco morado desplazado a la derecha sobre negro. */
.fm-body {
  min-height: 100vh;
  background:
    radial-gradient(120% 90% at 72% 50%, var(--fm-fondo-1) 0%, #3d0435 38%, var(--fm-fondo-2) 78%),
    var(--fm-fondo-2);
  background-attachment: fixed;
}

.fm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Lockup de marca ---------- */
.fm-logo { display: inline-block; line-height: .92; }
.fm-logo__1 {
  display: block; color: #fff; font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -.01em;
}
.fm-logo__2 {
  display: block; font-weight: 700;
  font-size: clamp(3rem, 6.4vw, 5.2rem); letter-spacing: -.02em;
}
.fm-logo__2 i { font-style: normal; color: var(--lime); }
.fm-logo__2 b { font-weight: 700; color: var(--pink); }
.fm-logo__pill {
  display: inline-block; margin-top: 12px;
  font-size: .78rem; font-weight: 600; color: #fff;
  background: #0b0b0d; border: 1.5px solid var(--lime);
  padding: 6px 16px; border-radius: 999px;
}
.fm-logo--maker .fm-logo__1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.fm-logo--maker .fm-logo__2 { font-size: clamp(2.6rem, 6vw, 4.2rem); }

/* ---------- Distribución en dos columnas ---------- */
.fm-escena {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
  min-height: min(78vh, 720px); padding: 40px 0 64px;
}
@media (max-width: 900px) {
  .fm-escena { grid-template-columns: 1fr; gap: 30px; min-height: 0; padding: 24px 0 48px; }
}

/* ---------- La tarjeta blanca ---------- */
.fm-tarjeta {
  background: var(--fm-tarjeta);
  border: 4px solid var(--fm-morado);
  border-radius: 30px;
  box-shadow: 0 0 0 1px rgba(167,139,250,.35), 0 30px 70px rgba(0,0,0,.55);
  aspect-ratio: 3 / 4;
  max-width: 460px; width: 100%; margin: 0 auto;
  display: grid; place-items: center;
  overflow: hidden; position: relative;
  color: var(--fm-tarjeta-ink);
}
.fm-tarjeta img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }

/* Estados internos de la tarjeta */
.fm-estado { text-align: center; padding: 28px; width: 100%; }
.fm-estado__icono { width: 96px; height: 96px; margin: 0 auto 14px; color: #2b2430; }
.fm-estado__icono svg { width: 100%; height: 100%; }
.fm-estado h2 { font-size: 1.5rem; margin: 0 0 6px; color: var(--fm-tarjeta-ink); }
.fm-estado p { font-size: .84rem; color: #6b6472; margin: 0; line-height: 1.45; }

/* Zona de subida: toda la tarjeta es pulsable */
.fm-soltar { cursor: pointer; width: 100%; height: 100%; display: grid; place-items: center; }
.fm-soltar.is-over { background: rgba(167,139,250,.12); }
.fm-soltar:focus-visible { outline: 3px solid var(--pink); outline-offset: -6px; }

/* Ensamblando: puntos que laten */
.fm-cargando__puntos { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.fm-cargando__puntos i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--fm-morado);
  animation: fmLatido 1.1s ease-in-out infinite;
}
.fm-cargando__puntos i:nth-child(2) { animation-delay: .18s; }
.fm-cargando__puntos i:nth-child(3) { animation-delay: .36s; }
@keyframes fmLatido { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }
.fm-tarjeta.is-cargando { box-shadow: 0 0 0 1px rgba(167,139,250,.35), 0 0 70px rgba(167,139,250,.45), 0 30px 70px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce) {
  .fm-cargando__puntos i { animation: none; opacity: .7; }
}

/* ---------- Columna de texto ---------- */
.fm-copy { max-width: 520px; }
.fm-copy__lista { margin: 22px 0 26px; padding: 0; list-style: none; }
.fm-copy__lista li {
  color: #efe9f3; font-size: 1rem; line-height: 1.6;
  padding-left: 0; margin-bottom: 2px;
}
.fm-nota { color: #b9a8c4; font-size: .85rem; line-height: 1.55; margin: 18px 0 0; }

/* Aviso de privacidad bajo el area de subida. Se lee, pero no compite con el
   "Sube tu foto": el objetivo es tranquilizar, no interrumpir. */
.fm-nota--privacidad {
  font-size: .78rem;
  text-align: center;
  margin: 14px auto 0;
  max-width: 40ch;
}
.fm-nota--privacidad a { color: inherit; text-decoration: underline; }
.fm-nota--privacidad a:hover { color: #fff; }

/* Botón de compra partido: precio + acción */
.fm-comprar {
  display: inline-flex; align-items: stretch; gap: 0;
  background: var(--fm-morado); border-radius: 999px;
  padding: 7px; border: 0; cursor: pointer;
  box-shadow: 0 10px 30px rgba(139,92,246,.45);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.fm-comprar:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(139,92,246,.6); }
.fm-comprar[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.fm-comprar__precio {
  background: #fff; color: #2b2140; font-weight: 700;
  font-size: 1.35rem; border-radius: 999px;
  padding: 10px 30px; display: grid; place-items: center;
}
.fm-comprar__accion {
  color: #fff; font-weight: 600; font-size: 1.3rem;
  padding: 10px 34px; display: grid; place-items: center;
}

.fm-secundario {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; background: var(--pink); color: #fff;
  font-weight: 700; font-size: .95rem;
  padding: 11px 24px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,45,138,.4);
}
.fm-secundario:hover { background: var(--pink-700); }
.fm-secundario span { background: rgba(0,0,0,.25); border-radius: 999px; padding: 1px 8px; font-size: .8rem; }

.fm-terciario {
  display: inline-block; margin-top: 16px; margin-right: 12px;
  color: #d9cbe4; font-size: .92rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.fm-terciario:hover { color: #fff; }

/* Mensajes */
.fm-msg {
  margin: 18px 0 0; padding: 12px 16px; border-radius: 12px;
  font-size: .92rem; line-height: 1.5; display: none; max-width: 46ch;
}
.fm-msg[data-kind] { display: block; }
.fm-msg[data-kind="error"] { background: rgba(255,92,71,.16); color: #ffb3a6; }
.fm-msg[data-kind="aviso"] { background: rgba(255,176,32,.15); color: #ffd79a; }
.fm-msg[data-kind="info"]  { background: rgba(255,255,255,.08); color: #e4d9ec; }

/* ---------- Hub: las dos herramientas ---------- */
.fm-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 60px 0 80px; }
@media (max-width: 900px) { .fm-hub { grid-template-columns: 1fr; gap: 34px; } }
.fm-hub__opciones { display: flex; flex-direction: column; gap: 34px; }
.fm-opcion {
  display: flex; align-items: center; gap: 20px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px; padding: 22px 26px;
  text-align: left; cursor: pointer; width: 100%;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.fm-opcion:hover { transform: translateY(-3px); border-color: var(--fm-morado); background: rgba(167,139,250,.10); }
.fm-opcion__icono {
  flex: none; width: 84px; height: 84px; border-radius: 20px;
  background: linear-gradient(150deg, #c4b5fd, #8b5cf6);
  display: grid; place-items: center; font-size: 2.4rem;
}
.fm-opcion__proximamente { opacity: .55; cursor: default; }
.fm-opcion__proximamente:hover { transform: none; border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.fm-etiqueta {
  display: inline-block; margin-top: 8px; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--lime); background: rgba(211,255,60,.14);
  padding: 4px 11px; border-radius: 999px;
}

/* ---------- Galería "Mis Personajes" ---------- */
.fm-galeria { padding: 40px 0 80px; }
.fm-galeria h2 { color: #fff; font-size: 1.7rem; margin: 0 0 6px; }
.fm-galeria p { color: #b9a8c4; margin: 0 0 26px; }
.fm-galeria__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.fm-personaje {
  background: var(--fm-tarjeta); border: 3px solid var(--fm-morado);
  border-radius: 20px; overflow: hidden; aspect-ratio: 3/4;
  display: grid; place-items: center; position: relative;
}
.fm-personaje img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.fm-personaje__acciones {
  position: absolute; inset: auto 0 0 0; display: flex; gap: 8px;
  padding: 10px; background: linear-gradient(transparent, rgba(0,0,0,.6));
  opacity: 0; transition: opacity .18s var(--ease);
}
.fm-personaje:hover .fm-personaje__acciones,
.fm-personaje:focus-within .fm-personaje__acciones { opacity: 1; }
.fm-personaje__acciones button {
  flex: 1; font-size: .78rem; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.7); border-radius: 999px; padding: 7px 10px;
}
.fm-personaje__acciones button:hover { background: var(--pink); }
.fm-galeria__vacio { color: #b9a8c4; font-size: .95rem; }