/* 13b-links-mask — modal "Personalize sua foto de perfil" da página /links
   (porte 1:1 de Links Juliana.dc.html, projeto Claude Design dd15fb0a,
   import 2026-08-23). Mesmo gerador client-side de _personalize.html
   (moldura.js, contrato data-m-*), aqui dentro de um modal em vez de seção. */

.jg-links__mask-backdrop { position: fixed; inset: 0; background: rgba(2, 50, 44, .75); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; }
.jg-links__mask-card { background: #ffffff; border-radius: 24px; max-width: 420px; width: 100%; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; padding: 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.jg-links__mask-head { display: flex; align-items: center; gap: 10px; }
.jg-links__mask-title { margin: 0; flex: 1; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 19px; color: #046052; }
.jg-links__mask-close { background: #eef3f1; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; color: #39505a; cursor: pointer; flex: none; }
.jg-links__mask-close:hover { background: #dce5e2; }

/* "Como funciona" — tutorial dentro do modal */
.jg-links__mask-how { background: #016cbe; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.jg-links__mask-how-label { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; color: #fcc609; letter-spacing: .5px; text-transform: uppercase; }
.jg-links__mask-how-row { display: flex; align-items: center; gap: 8px; }
.jg-links__mask-how-circle, .jg-links__mask-how-mask { width: 58px; height: 58px; border-radius: 50%; background: #ffffff; overflow: hidden; flex: none; }
.jg-links__mask-how-circle { display: flex; align-items: center; justify-content: center; }
.jg-links__mask-how-mask img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.jg-links__mask-how-op { color: #ffffff; font-weight: 800; font-size: 18px; }
.jg-links__mask-how-result { width: 58px; height: 58px; border-radius: 50%; background: #dce5e2; overflow: hidden; flex: none; position: relative; }
.jg-links__mask-how-result-icon { position: absolute; top: 8px; left: 14px; }
.jg-links__mask-how-result img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.jg-links__mask-how-text { color: rgba(255, 255, 255, .9); font-size: 12.5px; text-align: center; line-height: 1.5; }

/* Passos 1/2/3 */
.jg-links__mask-step { display: flex; flex-direction: column; gap: 8px; }
.jg-links__mask-step-label { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; color: #046052; }
.jg-links__mask-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jg-links__mask-pick { padding: 0; border: 3px solid #dce5e2; border-radius: 12px; overflow: hidden; cursor: pointer; background: #f6f8f7; aspect-ratio: 1; position: relative; }
.jg-links__mask-pick img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.jg-links__mask-upload { display: flex; align-items: center; justify-content: center; gap: 10px; background: #039580; color: #ffffff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; padding: 13px 20px; border-radius: 999px; border: none; cursor: pointer; }
.jg-links__mask-upload:hover { background: #04756a; }

/* Prévia + controles + download */
.jg-links__mask-preview { position: relative; border-radius: 16px; overflow: hidden; background: #eef3f1; aspect-ratio: 1; }
.jg-links__mask-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.jg-links__mask-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.jg-links__mask-placeholder span { font-size: 13px; color: #9fb3ad; font-weight: 600; }
.jg-links__mask-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none; }
.jg-links__mask-drag { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.jg-links__mask-controls { display: flex; flex-direction: column; gap: 10px; }
.jg-links__mask-zoom-row { display: flex; align-items: center; gap: 10px; }
.jg-links__mask-zoom-icon { flex: none; }
.jg-links__mask-zoom { flex: 1; accent-color: #039580; }
.jg-links__mask-reset { background: #eef3f1; border: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: #39505a; cursor: pointer; flex: none; }
.jg-links__mask-reset:hover { background: #dce5e2; }
.jg-links__mask-hint { font-size: 12px; color: #9fb3ad; text-align: center; }
.jg-links__mask-download { display: flex; align-items: center; justify-content: center; gap: 10px; background: #dce5e2; color: #9fb3ad; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; padding: 13px 20px; border-radius: 999px; border: none; cursor: default; }
.jg-links__mask-download:hover { filter: brightness(1.05); }

/* Fechamento animado (regra Overlay-Close-Animation — mesmo timing dos
   modais da landing, 09-modals.css). */
.jg-links__mask-backdrop { transition: opacity .18s ease; }
.jg-links__mask-backdrop.is-closing { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .jg-links__mask-backdrop { transition: none; }
}