/* FINDLEY GAMES · Ventanas comunes (Pase, nivel de pago, patrocinio, avisos). Las usa el portal y cada juego. */
:root {
  --fg-fondo: #0a0714;
  --fg-fondo-2: #130d24;
  --fg-fondo-3: #1c1433;
  --fg-linea: rgba(255, 255, 255, .09);
  --fg-texto: #f4f1ff;
  --fg-gris: #a59cc4;
  --fg-violeta: #7c4dff;
  --fg-violeta-2: #a07bff;
  --fg-cian: #00e5ff;
  --fg-lima: #c6ff00;
  --fg-rosa: #ff2d75;
  --fg-oro: #ffd23f;
  --fg-display: "Chakra Petch", "Plus Jakarta Sans", system-ui, sans-serif;
}
[hidden] { display: none !important; }
.fg-capa { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(5, 3, 12, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s; }
.fg-capa.ver { opacity: 1; }
.fg-ventana { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px 24px 24px; border-radius: 24px; background: linear-gradient(180deg, #1d1538, #120c22); border: 1px solid var(--fg-linea); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(124, 77, 255, .15) inset; color: var(--fg-texto); text-align: center; font-family: "Plus Jakarta Sans", system-ui, sans-serif; transform: translateY(14px) scale(.97); transition: transform .25s cubic-bezier(.2, .9, .3, 1.2); }
.fg-capa.ver .fg-ventana { transform: none; }
.fg-ventana h2 { font-family: var(--fg-display); font-size: 26px; line-height: 1.1; margin: 4px 0 8px; letter-spacing: -.01em; }
.fg-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--fg-gris); font-size: 22px; cursor: pointer; }
.fg-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.fg-eyebrow { font-family: var(--fg-display); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: var(--fg-cian); }
.fg-sub { color: var(--fg-gris); font-size: 14.5px; margin-bottom: 18px; }
.fg-nota { color: var(--fg-gris); font-size: 13px; margin-top: 14px; }

.fg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif; color: #fff; background: linear-gradient(135deg, var(--fg-violeta), #5b2bff); cursor: pointer; text-decoration: none; transition: transform .15s, filter .15s; }
.fg-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.fg-btn:active { transform: translateY(1px); }
.fg-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.fg-btn-claro { background: #fff; color: #120c22; }
.fg-btn-yape { background: linear-gradient(135deg, #7a1fa2, #a72fd8); width: 100%; }
.fg-yape { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #fff; color: #7a1fa2; font-weight: 900; }
.fg-btn-mp { background: #009ee3; width: 100%; }
.fg-btn-wa { background: #25d366; color: #052e14; width: 100%; margin-top: 12px; }

/* Pase */
.fg-v-pase { width: min(470px, 100%); }
.fg-pase-cab { margin: -28px -24px 18px; padding: 30px 24px 22px; border-radius: 24px 24px 0 0; background: radial-gradient(120% 130% at 50% 0%, rgba(255, 210, 63, .28), transparent 60%), linear-gradient(180deg, #2b1d55, transparent); }
.fg-corona { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 18px; font-size: 30px; color: #1a1030; background: linear-gradient(135deg, var(--fg-oro), #ff9f1c); box-shadow: 0 10px 30px rgba(255, 210, 63, .4); }
.fg-pase-cab .fg-eyebrow { color: var(--fg-oro); }
.fg-beneficios { list-style: none; text-align: left; display: grid; gap: 9px; margin: 0 4px 18px; font-size: 14.5px; }
.fg-beneficios li { display: flex; gap: 10px; align-items: flex-start; padding: 0; }
.fg-beneficios li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(198, 255, 0, .15); color: var(--fg-lima); font-size: 12px; font-weight: 800; margin-top: 1px; }
.fg-planes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.fg-plan { position: relative; display: grid; gap: 2px; padding: 16px 10px 14px; border-radius: 16px; border: 2px solid var(--fg-linea); background: rgba(255, 255, 255, .03); cursor: pointer; transition: border-color .15s, background .15s; }
.fg-plan input { position: absolute; opacity: 0; pointer-events: none; }
.fg-plan b { font-size: 14px; }
.fg-plan small { color: var(--fg-gris); font-size: 12px; }
.fg-precio { font-family: var(--fg-display); font-size: 28px; font-weight: 700; }
.fg-plan:has(input:checked) { border-color: var(--fg-oro); background: rgba(255, 210, 63, .08); }
.fg-plan:has(input:focus-visible) { outline: 3px solid var(--fg-cian); outline-offset: 2px; }
.fg-cinta { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 99px; background: var(--fg-oro); color: #1a1030; font-size: 11px; font-weight: 800; }
.fg-pagos { display: grid; gap: 10px; }
.fg-yape-pasos { margin-top: 14px; padding: 16px; border-radius: 16px; background: rgba(167, 47, 216, .12); border: 1px solid rgba(167, 47, 216, .35); text-align: left; font-size: 14px; }
.fg-yape-pasos ol { padding-left: 20px; display: grid; gap: 6px; }
.fg-codigo { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--fg-linea); text-align: left; }
.fg-codigo label { font-size: 13px; font-weight: 700; color: var(--fg-gris); }
.fg-codigo div { display: flex; gap: 8px; margin-top: 8px; }
.fg-codigo input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--fg-linea); background: rgba(0, 0, 0, .3); color: #fff; font: 700 16px/1 var(--fg-display); letter-spacing: .08em; text-transform: uppercase; }
.fg-codigo input:focus { outline: 2px solid var(--fg-violeta); border-color: transparent; }
.fg-msg { min-height: 20px; margin-top: 8px; font-size: 13px; }
.fg-msg.ok { color: var(--fg-lima); }
.fg-msg.error { color: #ff7a9c; }

/* Nivel de pago */
.fg-candado { font-size: 42px; margin-bottom: 6px; filter: drop-shadow(0 8px 20px rgba(124, 77, 255, .6)); }
.fg-opciones { display: grid; gap: 10px; text-align: left; }
.fg-opcion { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--fg-linea); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; font: inherit; transition: background .15s, transform .15s; }
.fg-opcion:hover:not(:disabled) { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }
.fg-opcion:disabled { opacity: .45; cursor: not-allowed; }
.fg-opcion > span { font-size: 24px; }
.fg-opcion div { flex: 1; display: grid; }
.fg-opcion small { color: var(--fg-gris); font-size: 12.5px; }
.fg-opcion i { font-style: normal; color: var(--fg-gris); }
.fg-opcion.destacada { border-color: rgba(255, 210, 63, .5); background: linear-gradient(135deg, rgba(255, 210, 63, .14), rgba(124, 77, 255, .1)); }
.fg-opcion.destacada > span { color: var(--fg-oro); }

/* Patrocinio */
.fg-anuncio { margin: 12px 0 16px; padding: 26px 20px; border-radius: 18px; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%), rgba(255, 255, 255, .04); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.fg-anuncio b { font-family: var(--fg-display); font-size: 28px; }
.fg-anuncio p { color: #ddd6f5; margin: 6px 0 16px; }
.fg-anuncio .fg-btn { background: var(--c); min-height: 40px; font-size: 14px; }
.fg-barra { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-bottom: 14px; }
.fg-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--fg-violeta), var(--fg-cian)); }
@keyframes fg-llenar { to { width: 100%; } }

.fg-toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translate(-50%, 30px); opacity: 0; padding: 12px 18px; border-radius: 14px; background: #fff; color: #120c22; font: 700 14px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); transition: .25s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.fg-toast.ver { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .fg-capa, .fg-ventana, .fg-toast { transition: none; } }