/* =========================================================
   Faça sua foto — Aécio Neves 456
   Página utilitária: editor em destaque
   ========================================================= */
:root{
  --mf-azul:#0014E4;
  --mf-azul-escuro:#00026E;
  --mf-azul-vivo:#0066F2;
  --mf-amarelo:#D2FF00;
  --mf-papel:#FFFFFF;
  --mf-fundo:#F3F6FA;
  --mf-linha:#DAE3EF;
  --mf-texto-fraco:#5B6B7C;
  --mf-largura:min(1360px,calc(100% - 48px));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--mf-fundo);
}

.foto-apoio{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--mf-fundo);
  color:var(--mf-azul-escuro);
}

.foto-apoio .fora-da-tela{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.foto-apoio .tira{
  width:100%;
  height:10px;
  display:block;
  background:var(--mf-azul-vivo);
}

/* ---- Intro sólida, sem degradê ---- */
.foto-apoio__top{
  background:var(--mf-azul);
}

.foto-apoio__hero{
  width:100%;
  max-width:none;
  margin:0;
  line-height:0;
  overflow:hidden;
  background:var(--mf-azul-escuro);
}
.foto-apoio__hero picture,
.foto-apoio__hero img{
  display:block;
  width:100%;
  height:auto;
}

.foto-apoio .capa{
  width:var(--mf-largura);
  max-width:100%;
  margin:0 auto;
  padding:clamp(30px,5vw,62px) max(22px,env(safe-area-inset-right)) clamp(28px,4vw,48px) max(22px,env(safe-area-inset-left));
  text-align:center;
}

.foto-apoio .capa .olho{
  margin:0 0 12px;
  font-size:clamp(.78rem,1.1vw,1rem);
  font-weight:800;
  letter-spacing:.2em;
  line-height:1.2;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.foto-apoio .capa .olho .foto-apoio__num,
.foto-apoio .capa h1 .foto-apoio__accent,
.foto-apoio .capa h1 .foto-apoio__num{
  color:var(--mf-amarelo);
}
.foto-apoio .capa h1{
  margin:0;
  font-weight:900;
  font-size:clamp(2rem,5vw,4rem);
  line-height:.98;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:#fff;
}
.foto-apoio .capa .lead{
  margin:18px auto 0;
  max-width:68ch;
  font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.55;
  color:#fff;
}
.foto-apoio .capa .lead strong{
  color:#fff;
  font-weight:800;
}
.foto-apoio .botao.foto-apoio__start-cta{
  width:min(100%,360px);
  margin:24px auto 0;
  border-color:var(--mf-amarelo);
  background:var(--mf-amarelo);
  color:var(--mf-azul-escuro);
  box-shadow:0 8px 24px -12px rgba(0,2,110,.65);
}
.foto-apoio .botao.foto-apoio__start-cta:hover,
.foto-apoio .botao.foto-apoio__start-cta:focus-visible{
  background:#e1ff45;
  border-color:#e1ff45;
  color:var(--mf-azul-escuro);
}
.foto-apoio.has-photo .foto-apoio__start-cta{
  display:none;
}

.foto-apoio .instrucoes{
  width:var(--mf-largura);
  max-width:100%;
  margin:0 auto;
  display:grid;
  gap:12px;
}
.foto-apoio .passo{
  background:var(--mf-papel);
  border:1px solid var(--mf-linha);
  border-radius:16px;
  padding:16px 18px;
  text-align:left;
}
.foto-apoio .passo strong{
  display:block;
  color:var(--mf-azul-escuro);
  font-size:clamp(.95rem,1.3vw,1.15rem);
  font-weight:800;
}
.foto-apoio .passo span{
  display:block;
  margin-top:5px;
  color:var(--mf-texto-fraco);
  font-size:clamp(.88rem,1.1vw,1rem);
  line-height:1.5;
}
.foto-apoio .passo b{color:var(--mf-azul)}

/* ---- Ferramenta ---- */
.foto-apoio main{
  flex:1;
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:clamp(22px,3.5vw,42px) max(16px,env(safe-area-inset-right)) 64px max(16px,env(safe-area-inset-left));
  display:flex;
  flex-direction:column;
  gap:18px;
}

.foto-apoio .formatos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  background:var(--mf-papel);
  border:1px solid var(--mf-linha);
  border-radius:14px;
  padding:6px;
}
.foto-apoio .formatos button{
  min-height:68px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--mf-texto-fraco);
  font-size:clamp(.9rem,1.1vw,1rem);
  font-weight:600;
  text-align:center;
  padding:6px 4px;
  cursor:pointer;
}
.foto-apoio .formatos button small{
  display:block;
  margin-top:4px;
  font-size:.75rem;
  opacity:.75;
}
.foto-apoio .formatos button[aria-selected="true"]{
  background:var(--mf-azul);
  color:#fff;
}
.foto-apoio .formatos button:focus-visible,
.foto-apoio .botao:focus-visible{
  outline:3px solid var(--mf-amarelo);
  outline-offset:2px;
}

.foto-apoio .palco{
  position:relative;
  width:100%;
  min-height:360px;
  background:var(--mf-papel);
  border:1px solid var(--mf-linha);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px -20px rgba(8,42,84,.4);
}
.foto-apoio .palco canvas{
  display:block;
  width:100%;
  height:auto;
}
.foto-apoio.has-photo .palco{
  touch-action:none;
}
.foto-apoio.has-photo .palco canvas{
  cursor:grab;
}
.foto-apoio.has-photo .palco.arrastando canvas{
  cursor:grabbing;
}
.foto-apoio .vazio{
  position:absolute;
  top:14%;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:grid;
  gap:8px;
  text-align:center;
  padding:16px 18px;
  width:min(72%,420px);
  border-radius:16px;
  border:1px solid var(--mf-linha);
  background:#fff;
  box-shadow:0 8px 20px -14px rgba(0,20,228,.55);
  cursor:pointer;
}
.foto-apoio .vazio svg{
  width:30px;
  height:30px;
  margin:0 auto;
  opacity:.46;
  color:var(--mf-azul);
}
.foto-apoio .vazio p{
  margin:0;
  font-size:clamp(.9rem,1.2vw,1.05rem);
  line-height:1.45;
  color:var(--mf-texto-fraco);
}
.foto-apoio .vazio strong{
  color:var(--mf-azul);
  font-weight:700;
}
.foto-apoio.has-photo .vazio{display:none}

.foto-apoio .foto-apoio__preview-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  padding:8px 12px;
  border-radius:99px;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  background:rgba(11,60,120,.92);
  color:#fff;
}
.foto-apoio.has-photo .foto-apoio__preview-badge{
  background:var(--mf-amarelo);
  color:#11213D;
}

.foto-apoio .foto-apoio__upload-cta{
  display:flex;
}
.foto-apoio.has-photo .foto-apoio__upload-cta{
  display:none;
}

.foto-apoio .controles{display:none;gap:10px}
.foto-apoio.has-photo .controles{display:flex;flex-direction:column}
.foto-apoio .controle{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border:1px solid var(--mf-linha);
  border-radius:14px;
  background:#fff;
}
.foto-apoio .controle label{
  min-width:54px;
  font-size:1rem;
  font-weight:600;
  color:var(--mf-texto-fraco);
}
.foto-apoio .controle input[type=range]{
  width:100%;
  accent-color:var(--mf-azul);
}

.foto-apoio .botoes{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.foto-apoio .moldura-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.foto-apoio .foto-apoio__moldura-meta{
  margin:4px 0 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--mf-texto-fraco);
  font-size:1rem;
}
.foto-apoio .foto-apoio__moldura-meta strong{
  color:var(--mf-azul-escuro);
}
.foto-apoio .botao{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--mf-linha);
  border-radius:16px;
  padding:16px 20px;
  background:#fff;
  color:var(--mf-azul-escuro);
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
}
.foto-apoio .botao svg{width:20px;height:20px}
.foto-apoio .botao--mf-azul{
  background:var(--mf-azul);
  border-color:var(--mf-azul);
  color:#fff;
}
.foto-apoio .botao:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.foto-apoio .botao.btn--primary{
  background:var(--mf-amarelo);
  border-color:var(--mf-amarelo);
  color:var(--mf-azul-escuro);
  box-shadow:0 4px 16px -8px rgba(210,255,0,.55);
}
.foto-apoio .botao.btn--ghost{
  background:#fff;
  border-color:var(--mf-linha);
  color:var(--mf-texto-fraco);
  font-weight:600;
}

.foto-apoio__workspace{
  width:var(--mf-largura);
  max-width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
}
.foto-apoio__preview-col,
.foto-apoio__tools-col{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}
.foto-apoio__tools-col{
  background:var(--mf-papel);
  border:1px solid var(--mf-linha);
  border-radius:20px;
  padding:20px;
  box-shadow:0 10px 30px -22px rgba(8,42,84,.28);
}
.foto-apoio__share-note{
  margin:0;
  text-align:center;
}

.foto-apoio.has-single-moldura .foto-apoio__moldura-meta,
.foto-apoio.has-single-moldura .moldura-nav{
  display:none;
}

.foto-apoio .foto-apoio__actions.is-mobile-share{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.foto-apoio .foto-apoio__actions.is-mobile-share > .foto-apoio__trocar-tools{
  grid-column:1/-1;
}
.foto-apoio .foto-apoio__actions.is-mobile-share > #foto-bt-galeria{
  grid-column:1/-1;
}
.foto-apoio .foto-apoio__actions.is-desktop-share{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.foto-apoio .foto-apoio__actions.is-desktop-share > .foto-apoio__trocar-tools{
  grid-column:1/-1;
}
.foto-apoio .foto-apoio__actions.is-desktop-share > #foto-bt-baixar{
  grid-column:1;
}
.foto-apoio .foto-apoio__actions.is-desktop-share > #foto-bt-compartilhar{
  grid-column:2;
}

.foto-apoio.arrastando .foto-apoio__actions{
  pointer-events:none;
}

.foto-apoio .recado{
  margin:0;
  min-height:1.3em;
  text-align:center;
  font-size:.95rem;
  line-height:1.55;
  color:#5A6D82;
}
.foto-apoio .recado b{color:var(--mf-azul)}
.foto-apoio .foto-apoio__status.is-ok{color:#137A5F;font-weight:600}
.foto-apoio .foto-apoio__status.is-err{color:#B3261E;font-weight:600}

.foto-apoio__save-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(0,2,110,.88);
  backdrop-filter:blur(4px);
}
.foto-apoio__save-overlay-card{
  position:relative;
  width:min(100%,420px);
  padding:16px;
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.55);
}
.foto-apoio__save-overlay-close{
  position:absolute;
  top:8px;
  right:10px;
  border:0;
  background:transparent;
  color:#5B6B7C;
  font-size:1.75rem;
  line-height:1;
  cursor:pointer;
}
.foto-apoio__save-overlay-hint{
  margin:0 0 12px;
  font-size:.95rem;
  line-height:1.45;
  color:var(--mf-azul-escuro);
}
.foto-apoio__save-overlay-hint strong{color:var(--mf-azul)}
.foto-apoio__save-overlay-card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:default;
}

.foto-apoio footer{
  margin-top:auto;
  background:var(--mf-azul);
  color:#fff;
  text-align:center;
  padding-bottom:calc(34px + env(safe-area-inset-bottom));
}
.foto-apoio footer .interno{
  padding:28px max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));
}
.foto-apoio footer .assinatura{
  margin:0;
  font-weight:900;
  font-size:clamp(22px,6.4vw,30px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.foto-apoio footer .assinatura b{color:var(--mf-amarelo)}
.foto-apoio footer .regra{
  width:44px;
  height:2px;
  border-radius:2px;
  margin:13px auto 15px;
  background:rgba(255,255,255,.28);
}
.foto-apoio footer p{
  margin:0;
  font-size:11px;
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(255,255,255,.9);
}

@media (min-width:560px){
  .foto-apoio .instrucoes{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:767.98px){
  .foto-apoio{
    --mf-largura:min(1360px,100%);
  }
  .foto-apoio main{
    padding-left:max(4px,env(safe-area-inset-left));
    padding-right:max(4px,env(safe-area-inset-right));
  }
  .foto-apoio .instrucoes,
  .foto-apoio__workspace{
    width:100%;
    max-width:none;
  }
  .foto-apoio__preview-col{
    width:min(100%,440px);
    margin-inline:auto;
  }
  .foto-apoio .palco{
    min-height:0;
    width:100%;
  }
  .foto-apoio .vazio{
    width:min(84%,360px);
    top:11%;
    left:50%;
    transform:translateX(-50%);
    padding:12px 14px;
  }
  .foto-apoio__tools-col{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
  }
  .foto-apoio .formatos button{
    min-height:60px;
  }
  .foto-apoio:not(.has-photo) .foto-apoio__actions{
    display:none;
  }
}

@media (min-width:900px){
  .foto-apoio .capa{
    padding:clamp(42px,5vw,64px) 0 clamp(36px,4vw,52px);
  }
  .foto-apoio .capa h1{
    font-size:clamp(2.8rem,4.2vw,4.6rem);
    max-width:none;
  }
  .foto-apoio .capa .lead{
    font-size:clamp(1.08rem,1.45vw,1.3rem);
    margin-top:18px;
    max-width:68ch;
  }
  .foto-apoio .passo{
    padding:18px 20px;
  }
  .foto-apoio .passo strong{
    font-size:1.1rem;
  }
  .foto-apoio .passo span{
    font-size:1rem;
  }

  .foto-apoio main{
    padding-top:32px;
    padding-bottom:72px;
  }
  .foto-apoio__workspace{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
    gap:28px;
    align-items:start;
  }
  .foto-apoio__preview-col{
    gap:18px;
  }
  .foto-apoio__tools-col{
    padding:24px;
    gap:16px;
  }
  .foto-apoio .palco{
    min-height:min(78vh,820px);
  }
  .foto-apoio .palco canvas{
    min-height:min(78vh,820px);
    object-fit:contain;
  }
  .foto-apoio .formatos{
    grid-template-columns:repeat(2,1fr);
    gap:6px;
  }
  .foto-apoio .formatos button{
    min-height:72px;
    font-size:1rem;
  }
  .foto-apoio .recado{
    font-size:1rem;
  }
  .foto-apoio .foto-apoio__moldura-meta{
    font-size:1rem;
  }
  .foto-apoio .controle label{
    font-size:1rem;
  }
  .foto-apoio .foto-apoio__actions.is-desktop-share{
    display:flex;
    flex-direction:column;
  }
  .foto-apoio .foto-apoio__actions.is-desktop-share > #foto-bt-baixar,
  .foto-apoio .foto-apoio__actions.is-desktop-share > #foto-bt-compartilhar{
    grid-column:auto;
  }
}

@media (min-width:1100px){
  .foto-apoio__workspace{
    grid-template-columns:minmax(0,1.3fr) minmax(380px,.7fr);
    gap:28px;
  }
  .foto-apoio .formatos{
    grid-template-columns:repeat(4,1fr);
  }
}