/* 16-foto — página /foto "Coloque a campanha na sua foto" (porte 1:1 de
   Foto Perfil.dc.html, projeto dd15fb0a, update 26/08). Wizard de 3 passos:
   header com barras de progresso, miolo scrollável (max 560px) e footer
   fixo com CTA. Valores verbatim do bundle; style-hover → :hover. Adições da
   casa: prefers-reduced-motion desliga o fade de entrada dos passos e o CTA
   desabilitado não recebe o brightness de hover (no bundle o style-hover era
   incondicional). A ordem dos passos é invertida (ver foto.html). */

html, body { margin: 0; padding: 0; }
body { background: #046052; }
.jg-foto a { color: #fcc609; }
.jg-foto a:hover { color: #ffffff; }
@keyframes fpFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.jg-foto { min-height: 100dvh; display: flex; flex-direction: column; background: #046052; font-family: 'Inter', sans-serif; color: #ffffff; box-sizing: border-box; }
.jg-foto *, .jg-foto *::before, .jg-foto *::after { box-sizing: border-box; }

/* Header — marca + caption do passo + link pro site + barras */
.jg-foto__top { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 12px; background: #046052; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.jg-foto__top-row { display: flex; align-items: center; gap: 12px; max-width: 560px; width: 100%; margin: 0 auto; }
.jg-foto__brand { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jg-foto__brand-name { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 15px; color: #ffffff; letter-spacing: -.2px; }
.jg-foto__brand-num { color: #fcc609; }
.jg-foto__caption { font-size: 11.5px; color: rgba(255, 255, 255, .68); font-weight: 600; }
.jg-foto__site-link { flex: none; display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .14); color: #ffffff; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12.5px; padding: 9px 15px; border-radius: 999px; }
.jg-foto__site-link:hover { background: rgba(255, 255, 255, .26); color: #ffffff; }
.jg-foto__site-link svg { flex: none; }
.jg-foto__bars { display: flex; gap: 6px; max-width: 560px; width: 100%; margin: 0 auto; }
.jg-foto__bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.jg-foto__bar.is-on { background: #fcc609; }

/* Miolo scrollável */
.jg-foto__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; padding: 20px; }
.jg-foto__col { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 18px; margin: auto 0; }
.jg-foto__step { display: flex; flex-direction: column; gap: 18px; animation: fpFade .35s ease both; }
.jg-foto__step[data-fp-step="3"] { gap: 16px; }
.jg-foto__step[hidden] { display: none; }

.jg-foto__intro { display: flex; flex-direction: column; gap: 8px; }
.jg-foto__intro--center { gap: 6px; text-align: center; }
.jg-foto__eyebrow { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #fcc609; }
.jg-foto__h1 { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 900; color: #ffffff; text-wrap: pretty; }
.jg-foto__h1--lg { font-size: clamp(26px, 6vw, 36px); line-height: 1.1; letter-spacing: -.6px; }
.jg-foto__h1--md { font-size: clamp(24px, 5.5vw, 32px); line-height: 1.15; letter-spacing: -.5px; }
.jg-foto__h1--sm { font-size: clamp(22px, 5vw, 30px); line-height: 1.15; letter-spacing: -.5px; }
.jg-foto__p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.jg-foto__p--sm { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); }

/* Passo 1 — grade de molduras */
.jg-foto__masks-block { display: flex; flex-direction: column; gap: 12px; }
.jg-foto__label { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; color: #ffffff; }
.jg-foto__masks { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.jg-foto__mask { padding: 0; border: 3px solid rgba(255, 255, 255, .28); border-radius: 16px; overflow: hidden; cursor: pointer; background: #ffffff; aspect-ratio: 1; position: relative; box-shadow: none; }
/* Duas camadas por célula (inversão 26/08): a foto do eleitor embaixo
   (cover centrado — o enquadramento fino é o passo 3) e a moldura por cima. */
.jg-foto__mask-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.jg-foto__mask-photo[hidden] { display: none; }
.jg-foto__mask-frame { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.jg-foto__mask-dot { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: transparent; display: none; align-items: center; justify-content: center; color: #046052; font-size: 14px; font-weight: 900; }
.jg-foto__mask.is-active { border-color: #fcc609; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.jg-foto__mask.is-active .jg-foto__mask-dot { background: #fcc609; display: flex; }

/* Passo 2 — dropzone + moldura escolhida */
.jg-foto__drop { border: 2px dashed rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); border-radius: 22px; padding: 34px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; text-align: center; }
.jg-foto__drop:hover { background: rgba(255, 255, 255, .16); }
.jg-foto__drop.is-drag { border-color: #fcc609; background: rgba(252, 198, 9, .16); }
.jg-foto__drop-circle { width: 64px; height: 64px; border-radius: 50%; background: #fcc609; display: flex; align-items: center; justify-content: center; flex: none; }
.jg-foto__drop-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 16px; color: #ffffff; }
.jg-foto__drop-sub { font-size: 13px; color: rgba(255, 255, 255, .7); }
.jg-foto__chosen { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .1); border-radius: 16px; padding: 14px 16px; }
.jg-foto__chosen-thumb { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: #ffffff; }
.jg-foto__chosen-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.jg-foto__chosen-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jg-foto__chosen-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; color: #fcc609; }
.jg-foto__chosen-sub { font-size: 12.5px; color: rgba(255, 255, 255, .75); }

/* Passo 3 — preview + zoom + ferramentas */
.jg-foto__preview { position: relative; border-radius: 22px; overflow: hidden; background: #eef3f1; aspect-ratio: 1; align-self: center; width: min(100%, 52dvh); box-shadow: 0 20px 44px rgba(0, 0, 0, .32); }
.jg-foto__preview-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.jg-foto__preview-mask { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; pointer-events: none; }
.jg-foto__preview-drag { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.jg-foto__zoom { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 10px 16px; }
.jg-foto__zoom svg { flex: none; }
.jg-foto__zoom input[type="range"] { flex: 1; min-width: 0; accent-color: #fcc609; }
.jg-foto__tools { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.jg-foto__tool { background: rgba(255, 255, 255, .14); border: none; border-radius: 999px; padding: 9px 18px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; color: #ffffff; cursor: pointer; }
.jg-foto__tool:hover { background: rgba(255, 255, 255, .26); }

/* Footer — Voltar + CTA + hint */
.jg-foto__footer { flex: none; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); background: #03554a; border-top: 1px solid rgba(255, 255, 255, .12); }
.jg-foto__footer-col { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.jg-foto__footer-row { display: flex; gap: 10px; align-items: stretch; }
.jg-foto__back { flex: 0 0 25%; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, .14); border: none; color: #ffffff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 15px; padding: 16px 10px; border-radius: 999px; cursor: pointer; }
.jg-foto__back:hover { background: rgba(255, 255, 255, .26); }
.jg-foto__back svg { flex: none; }
.jg-foto__back[hidden] { display: none; }
.jg-foto__cta { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fcc609; color: #046052; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 16px; padding: 16px 22px; border-radius: 999px; border: none; cursor: pointer; }
.jg-foto__cta:hover { filter: brightness(1.06); }
.jg-foto__cta.is-disabled { background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .5); cursor: default; }
.jg-foto__cta.is-disabled:hover { filter: none; }
.jg-foto__hint { font-size: 12px; color: rgba(255, 255, 255, .6); text-align: center; }
.jg-foto__hint[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .jg-foto__step { animation: none; }
}