/* =====================================================================
   MOLDURADOR "ESTOU COM GLAYCON FRANCO"  —  /moldura

   BLOCO PRÓPRIO. Adaptado do moldurador entregue solto pelo designer
   (moldurador-glaycon/moldura.html), que era um arquivo único, com estilo
   próprio (azul #0B4C8C + dourado #F5B301) e sem relação com o site.

   Aqui ele passou a usar a paleta e a tipografia DO SITE — as variáveis de
   style.css — para que a pessoa que sai da landing e entra na ferramenta
   continue no mesmo lugar. Nenhuma cor nova foi inventada.

   TUDO É PREFIXADO COM .mold-*, DE PROPÓSITO.
   Esta página carrega o style.css do designer e o custom.css do modal, e o
   moldurador original usava .step, .btn, .field, .err e .fmt — os mesmos
   nomes do modal de cadastro. Sem o prefixo, as etapas do moldurador e as
   etapas do modal se escondem uma à outra.
   ===================================================================== */

/* A página inteira é escura: é uma ferramenta de tela única, e o fundo
   claro do site brigaria com a pré-visualização da arte (que tem branco no
   post e azul no story). O gradiente é o mesmo dos cartões da landing. */
#fs-landing.pag-moldura{
  background:linear-gradient(180deg, var(--card-blue-1) 0%, var(--card-blue-2) 100%);
  color:#fff;
  min-height:100vh;
}

/* O header do site é position:fixed com fundo preto translúcido — existe
   para flutuar sobre a foto do hero. Aqui não há hero: ele viraria uma
   tarja escura por cima do primeiro passo. */
#fs-landing.pag-moldura .mold-topo{
  position:static;
  background:rgba(0,0,0,0.28);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Escondido da tela, presente para o teclado e para o leitor de tela.
   display:none tiraria o campo da ordem de foco, e é justamente o campo de
   arquivo que precisa continuar acessível — o botão visível só o aciona. */
.mold-sr{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

.mold{padding:26px 0 46px;}
.mold-wrap{max-width:520px; margin:0 auto; padding:0 20px;}

/* ---------------- cabeçalho ---------------- */
.mold-cabeca{text-align:center; margin-bottom:26px;}
.mold-cabeca .mold-kick{
  font-family:'Sora', sans-serif;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.mold-cabeca h1{
  font-size:27px; margin:10px 0 8px; color:#fff; line-height:1.15;
}
.mold-cabeca h1 span{color:var(--gold);}
.mold-cabeca p{
  font-size:14.5px; line-height:1.5; color:rgba(255,255,255,0.78);
  font-weight:600; margin:0;
}

/* ---------------- etapas ---------------- */
/* .mold-step, e não .step: .step é do modal de cadastro, que também vive
   nesta página e usa o atributo [hidden] em vez de classe. */
.mold-step{display:none;}
.mold-step.on{display:block; animation:moldEntra .25s ease-out;}
@keyframes moldEntra{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:none;}
}
.mold-label{
  display:block; margin-bottom:12px;
  font-family:'Sora', sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--gold);
}

/* ---------------- escolha do formato ---------------- */
.mold-formats{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.mold-fmt{
  background:#fff; border:3px solid transparent; border-radius:16px;
  padding:16px 10px; cursor:pointer; text-align:center;
  font-family:'Sora', sans-serif;
  transition:border-color .15s ease, transform .15s ease;
}
.mold-fmt:hover{transform:translateY(-2px);}
.mold-fmt.sel{border-color:var(--gold);}
.mold-fmt b{display:block; color:var(--navy); font-size:15px; font-weight:800;}
.mold-fmt small{display:block; color:var(--gray); font-size:11px; margin-top:4px; font-weight:600;}
/* Miniatura do formato: retângulo na proporção certa com o furo redondo da
   foto marcado. Desenhada em CSS, não em imagem — são 2 formas. */
.mold-prev{
  display:block; margin:0 auto 10px; position:relative; overflow:hidden;
  background:var(--off); border:4px solid var(--navy); border-radius:6px;
}
.mold-prev.post{width:104px; height:104px;}
.mold-prev.story{width:74px; height:126px;}
.mold-prev::after{
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:74%; aspect-ratio:1; border-radius:50%;
  background:#fff; border:3px solid var(--gold);
}
.mold-prev.story::after{top:56%;}

/* Aviso de navegador embutido em app. Dourado da marca, não vermelho: não é
   erro, é instrução — e vermelho no topo da primeira tela faz a pessoa achar
   que a página está quebrada e sair. */
.mold-embutido{
  margin-bottom:20px; padding:14px 16px; border-radius:14px;
  background:rgba(242,196,56,0.13);
  border:1px solid rgba(242,196,56,0.42);
  font-size:13px; line-height:1.6; font-weight:600;
  color:#FFF3D4;
}
.mold-embutido strong{color:var(--gold);}

/* O que vai acontecer ao tocar em "Salvar". Discreto: é apoio, não alerta. */
.mold-dica-salvar{
  margin:10px 0 0; text-align:center;
  font-size:12.5px; line-height:1.55; font-weight:600;
  color:rgba(255,255,255,0.62);
}
.mold-dica-salvar strong{color:rgba(255,255,255,0.92);}

/* ---------------- editor ---------------- */
.mold-canvas{
  background:var(--off); border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  /* touch-action:none entrega os gestos ao canvas: sem isso o navegador
     rola a página quando a pessoa arrasta a própria foto. */
  touch-action:none; position:relative;
}
.mold-canvas canvas{display:block; max-width:100%; max-height:52vh; touch-action:none;}
.mold-hint{
  text-align:center; font-size:12.5px; line-height:1.5; font-weight:600;
  color:rgba(255,255,255,0.66); margin:12px 0 4px;
}
.mold-zoom{display:flex; align-items:center; gap:12px; margin:14px 0 6px;}
.mold-zoom span{font-size:17px; line-height:1;}
.mold-zoom input[type=range]{flex:1; accent-color:var(--gold); min-width:0;}

/* ---------------- botões ---------------- */
/* O .btn do designer (gradiente azul, pílula) é o primário e vem de
   style.css sem alteração. Aqui só nascem os secundários, que não existem
   no site — a landing nunca teve dois botões na mesma tela. */
.mold-sec, .mold-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:18px 24px; margin-top:12px;
  border-radius:999px; cursor:pointer;
  font-family:'Sora', sans-serif; font-weight:800; font-size:15px;
  letter-spacing:0.02em; text-transform:uppercase; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.mold-sec{background:#fff; color:var(--navy); border:none;}
.mold-sec:hover{background:var(--cream);}
.mold-ghost{
  background:transparent; color:rgba(255,255,255,0.82);
  border:2px solid rgba(255,255,255,0.32);
}
.mold-ghost:hover{border-color:rgba(255,255,255,0.6); color:#fff;}
.mold .btn{margin-top:14px;}
/* A regra do designer solta .btn em 280px fixos a partir de 1024px; dentro
   da coluna de 520px do moldurador isso deixaria o botão menor que os
   secundários, que são de largura cheia. */
@media (min-width:1024px){
  .mold .btn{width:100%; min-width:0; padding-left:28px; padding-right:28px;}
}

/* Foco visível: mesma marcação do modal (custom.css), pelo mesmo motivo —
   mudança de borda sozinha some no alto contraste. */
.mold button:focus-visible,
.mold a:focus-visible,
.mold input:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}

/* ---------------- resultado ---------------- */
.mold-done{text-align:center; margin-bottom:18px;}
.mold-done h2{font-size:23px; color:#fff; margin-bottom:8px;}
.mold-done h2 span{color:var(--gold);}
.mold-done p{font-size:14px; color:rgba(255,255,255,0.78); font-weight:600; line-height:1.55; margin:0;}
/* 32vh, e não 40: a arte é o elemento mais alto da tela final e era ela
   que empurrava o convite do grupo para fora da dobra. Continua grande o
   bastante para a pessoa conferir o enquadramento — que é para o que ela
   olha aqui; a imagem de verdade vai para a galeria dela. */
.mold-thumb{
  display:block; margin:0 auto 16px; border-radius:14px;
  max-height:32vh; max-width:100%; width:auto;
  box-shadow:0 14px 34px rgba(0,0,0,0.42);
}
/* Recado no lugar do alert(). O navegador que não compartilha arquivo
   (praticamente todo desktop) precisa ser avisado sem abrir caixa de
   diálogo — e diálogo do navegador trava a página inteira. */
.mold-recado{
  display:none; margin-top:14px; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  font-size:13px; line-height:1.55; font-weight:600; color:rgba(255,255,255,0.86);
}
.mold-recado.on{display:block;}

/* Faixa do grupo de WhatsApp na tela final — é a etapa 3 do modal trazida
   para cá.

   Fica DEPOIS de salvar a arte, e não antes: quem chegou aqui veio fazer a
   arte, e pedir o grupo antes de entregá-la perde as duas coisas. Mas fica
   ANTES de "Criar outra", e num cartão com peso visual próprio — na
   primeira versão era o último elemento da página, sem fundo, e caía
   abaixo da dobra. Botão que ninguém vê não é botão. */
.mold-grupo{
  margin-top:24px; padding:22px 18px 20px;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  text-align:center;
}
/* Mesmo check verde da etapa 3 do modal (custom.css). O verde é o do painel,
   não o dourado da marca: em cima do azul-escuro o dourado lê como aviso,
   e isto aqui é confirmação. */
.mold-ok{
  width:52px; height:52px; margin:0 auto 14px;
  border-radius:50%; background:#E7F5ED;
  display:flex; align-items:center; justify-content:center;
}
.mold-ok svg{width:26px; height:26px; stroke:#17914A; stroke-width:3; fill:none;}
.mold-grupo h3{
  font-family:'Sora', sans-serif; font-size:18px; font-weight:800;
  color:#fff; margin-bottom:8px; line-height:1.3;
}
.mold-grupo p{
  font-size:13.5px; line-height:1.55; font-weight:600;
  color:rgba(255,255,255,0.75); margin:0;
}
.mold-grupo .btn{margin-top:16px;}

/* ---------------- aviso de privacidade da foto ---------------- */
/* A garantia mais importante da página, e a que mais gera desconfiança se
   não estiver escrita: a foto não sobe para servidor nenhum. */
.mold-privacidade{
  margin-top:26px; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  font-size:12.5px; line-height:1.6; font-weight:600;
  color:rgba(255,255,255,0.74);
}
.mold-privacidade strong{color:#fff;}
/* O style.css do designer nao define cor de link solto - so dentro do
   rodape e do aceite. Sem esta regra, o link para a politica sai no azul
   padrao do navegador em cima do fundo azul-escuro: 1,3:1, praticamente
   invisivel. */
.mold-privacidade a{color:var(--gold); text-decoration:underline;}
.mold-privacidade a:hover{color:#fff;}

@media (prefers-reduced-motion: reduce){
  .mold-step.on{animation:none;}
  .mold-fmt, .mold-sec, .mold-ghost{transition:none;}
  .mold-fmt:hover{transform:none;}
}

@media (max-width:360px){
  .mold-cabeca h1{font-size:23px;}
  .mold-prev.post{width:88px; height:88px;}
  .mold-prev.story{width:64px; height:110px;}
}