/* ==========================================================================
   Yandra Moura 4444 — página /apoio
   Estúdio de foto de perfil. Usa as cores e as medidas do campanha.css;
   aqui ficam só as peças que existem nesta página.
   ========================================================================== */

.secao-apoio{padding-top:56px}

/* ---------- os quatro passos, em cima ---------- */
.passos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:0 0 38px;padding:0;list-style:none;counter-reset:none;
}
.passos li{
  display:flex;align-items:center;gap:11px;
  padding:14px 16px;border-radius:12px;
  background:var(--claro);border:1px solid var(--borda);
  font-size:14.5px;font-weight:500;color:var(--roxo-escuro);
}
.passos b{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--roxo);color:#fff;font-size:13px;
}

/* ---------- as duas colunas ---------- */
.estudio{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start}

/* ---------- coluna da esquerda ---------- */
.controles{display:flex;flex-direction:column;gap:26px}
.bloco-controle{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:22px;box-shadow:var(--sombra);
}
.rotulo-passo{
  display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--roxo-escuro);
}
.rotulo-passo b{
  flex:none;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--amarelo);color:var(--roxo-escuro);
  font-size:12.5px;letter-spacing:0;
}

/* esconde visualmente, mas o leitor de tela continua lendo */
.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.area-envio{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 18px;border-radius:12px;cursor:pointer;text-align:center;
  border:2px dashed rgba(134,0,250,.38);background:rgba(134,0,250,.04);
  color:var(--roxo);transition:background-color .18s ease,border-color .18s ease;
}
.area-envio:hover{background:rgba(134,0,250,.09);border-color:var(--roxo)}
.area-envio strong{font-size:16px;color:var(--roxo-escuro)}
.area-envio small{font-size:12.5px;color:var(--texto)}
.area-envio.tem-foto{border-style:solid;border-color:#1E9E5A;background:rgba(30,158,90,.07);color:#1E9E5A}
.area-envio.tem-foto small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#arquivo:focus-visible + .area-envio{outline:3px solid var(--amarelo);outline-offset:3px}

/* Botão de tirar foto na hora. Nasce escondido: o JS só o mostra em
   aparelho de tela sensível ao toque, onde o "capture" abre a câmera. */
.botao-camera{
  display:none;align-items:center;justify-content:center;gap:9px;
  margin-top:10px;padding:13px 18px;border-radius:999px;cursor:pointer;
  border:2px solid var(--roxo);background:#fff;color:var(--roxo);
  font-size:15px;font-weight:700;
  transition:background-color .16s ease,color .16s ease;
}
.botao-camera.aparece{display:flex}
.botao-camera:hover{background:var(--roxo);color:#fff}
#camera:focus-visible + .botao-camera{outline:3px solid var(--amarelo);outline-offset:3px}

.aviso-privacidade{
  display:flex;gap:10px;margin:16px 0 0;
  font-size:13px;line-height:1.55;color:var(--texto);
}
.aviso-privacidade svg{flex:none;color:var(--roxo);margin-top:1px}
.aviso-privacidade strong{color:var(--roxo-escuro)}

/* ---------- formato ---------- */
.opcoes-formato{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opcao-formato{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:12px;cursor:pointer;text-align:left;
  border:2px solid var(--borda);background:#fff;font-family:inherit;
  transition:border-color .18s ease,background-color .18s ease;
}
.opcao-formato:hover{border-color:var(--roxo-claro)}
.opcao-formato.ativa{border-color:var(--roxo);background:rgba(134,0,250,.06)}
.opcao-formato strong{display:block;font-size:14px;color:var(--roxo-escuro)}
.opcao-formato small{display:block;font-size:11.5px;color:var(--texto)}
.forma{flex:none;border:2px solid var(--roxo);border-radius:4px;background:rgba(134,0,250,.12)}
.forma.quadrada{width:26px;height:26px}
.forma.vertical{width:19px;height:32px}

/* ---------- molduras ---------- */
.lista-molduras{display:flex;flex-direction:column;gap:10px}
.cartao-moldura{
  display:flex;align-items:center;gap:13px;
  padding:10px 12px;border-radius:12px;cursor:pointer;text-align:left;
  border:2px solid var(--borda);background:#fff;font-family:inherit;
  transition:border-color .18s ease,background-color .18s ease;
}
.cartao-moldura:hover{border-color:var(--roxo-claro)}
.cartao-moldura.ativa{border-color:var(--roxo);background:rgba(134,0,250,.06)}
.cartao-moldura .amostra{
  flex:none;width:52px;height:52px;border-radius:9px;overflow:hidden;
  background:linear-gradient(140deg,#cfc6dd,#9f93b4);
  display:grid;place-items:center;
}
.cartao-moldura .amostra img{width:100%;height:100%;object-fit:contain}
.cartao-moldura strong{display:block;font-size:14.5px;color:var(--roxo-escuro)}
.cartao-moldura small{display:block;font-size:12px;color:var(--texto);line-height:1.4}
.cartao-moldura .visto{margin-left:auto;flex:none;color:var(--roxo);opacity:0}
.cartao-moldura.ativa .visto{opacity:1}

/* ---------- palco da prévia ---------- */
.palco{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:22px;box-shadow:var(--sombra);
  position:sticky;top:calc(var(--cabecalho) + 16px);
}
.palco-topo{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.palco-topo .rotulo-passo{margin:0}
.etiqueta-medida{
  flex:none;padding:5px 12px;border-radius:999px;
  background:var(--claro);border:1px solid var(--borda);
  font-size:12px;font-weight:700;color:var(--roxo-profundo);
}

.tela-cerca{
  position:relative;margin:0 auto;
  width:100%;max-width:440px;
  border-radius:14px;overflow:hidden;
  background:var(--roxo-escuro);
  box-shadow:0 10px 34px rgba(46,24,74,.22);
}
.tela-cerca canvas{display:block;width:100%;height:auto;touch-action:none}
.tela-cerca.arrastavel canvas{cursor:grab}
.tela-cerca.arrastando canvas{cursor:grabbing}

/* Fica por cima da tela, mas translúcido: assim dá para ver a moldura
   escolhida antes mesmo de enviar a foto. */
.tela-vazia{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;
  border:0;cursor:pointer;font-family:inherit;color:#fff;
  background:rgba(46,24,74,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background-color .18s ease;
}
.tela-vazia:hover{background:rgba(46,24,74,.72)}
.tela-vazia[hidden]{display:none}
.tela-vazia strong{font-size:16.5px}
.tela-vazia small{font-size:13px;color:rgba(255,255,255,.78)}
.tela-vazia svg{color:var(--amarelo);margin-bottom:4px}

/* fica no alto: embaixo ela cobriria o selo do 4444 da moldura */
.dica-arraste{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  margin:0;padding:7px 15px;border-radius:999px;pointer-events:none;
  background:rgba(46,24,74,.78);color:#fff;font-size:12.5px;font-weight:500;
  transition:opacity .35s ease;
}
.dica-arraste[hidden]{display:none}
.dica-arraste.some{opacity:0}

/* ---------- ajustes ---------- */
.ajustes{margin-top:18px;opacity:.45;pointer-events:none;transition:opacity .2s ease}
.ajustes.ligado{opacity:1;pointer-events:auto}
.linha-zoom{display:flex;align-items:center;gap:10px}
.campo-zoom{flex:1;display:block}
.campo-zoom input[type=range]{width:100%;accent-color:var(--roxo);cursor:pointer}
.botao-redondo{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--borda);background:#fff;color:var(--roxo-escuro);
  font-family:inherit;font-size:19px;line-height:1;
  transition:background-color .16s ease,border-color .16s ease;
}
.botao-redondo:hover{background:var(--claro);border-color:var(--roxo-claro)}
.recado{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--texto);min-height:20px}
.recado.erro{color:var(--erro);font-weight:500}

.acoes-arte{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.acoes-arte .btn{flex:1;min-width:170px;justify-content:center;text-align:center}
.acoes-arte .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.acoes-arte .btn[hidden]{display:none}

/* ---------- caixa do fim ---------- */
.caixa-apoio-final{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.caixa-apoio-final .btn{flex:none}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  /* Em coluna única a ordem segue a numeração: envia, formato, moldura e
     por último a prévia com o botão de baixar. */
  .estudio{grid-template-columns:1fr;gap:26px}
  .palco{position:static}
  .passos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .secao-apoio{padding-top:38px}
  .passos{grid-template-columns:1fr;gap:8px;margin-bottom:26px}
  .passos li{padding:11px 14px;font-size:14px}
  .palco,.bloco-controle{padding:16px}
  .opcoes-formato{grid-template-columns:1fr}
  .acoes-arte{flex-direction:column}
  .acoes-arte .btn{width:100%;min-width:0}
  .caixa-apoio-final{flex-direction:column;align-items:flex-start}
  .caixa-apoio-final .btn{width:100%;text-align:center}
}