/* ============================================================
   FERRAMENTA DE FOTO DE APOIO — embutida na seção #apoie
   Estilos 100% escopados em .at-tool para não conflitar com
   bootstrap / master.css / campanha.css
   ============================================================ */

.at-tool{
  --at-navy:#243065;
  --at-navy-deep:#1a2450;
  --at-azure:#23ace3;
  --at-gold:#fbde18;
  --at-cream:#FBF7EE;
  --at-ink:#3c4568;
  --at-ink-soft:#6b7391;
  --at-line:#DDE3EC;

  max-width:440px;
  margin:0 auto;
  text-align:center;
}

.at-tool *,
.at-tool *:before,
.at-tool *:after{ box-sizing:border-box; }

/* o template força display em inputs/canvas: garante o atributo hidden */
.at-tool [hidden]{ display:none !important; }

.at-tool button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.at-tool button:focus-visible,
.at-tool input:focus-visible{
  outline:2.5px solid var(--at-azure);
  outline-offset:3px;
}

/* ---------- palco do avatar ---------- */
.at-stage{
  display:flex;
  justify-content:center;
  margin-bottom:26px;
}
.at-circle{
  position:relative;
  width:min(340px,78vw);
}
/* mantém o quadrado (compatível com navegadores antigos) */
.at-circle:before{
  content:"";
  display:block;
  padding-top:100%;
}
.at-ring{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  border-radius:50%;
  padding:4px;
  background:#fff;
  box-shadow:0 10px 26px -6px rgba(36,48,101,.28);
}
.at-inner{
  position:absolute;
  top:4px; left:4px; right:4px; bottom:4px;
  border-radius:50%;
  overflow:hidden;
  background:var(--at-cream);
}
.at-photo{
  position:absolute;
  top:0; left:0;
  max-width:none !important;
  width:auto;
  height:auto;
  touch-action:none;
  cursor:grab;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}
.at-photo:active{ cursor:grabbing; }

.at-hint{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(26,36,80,.62);
  color:#fff;
  font-size:10.5px;
  font-weight:600;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  white-space:nowrap;
  z-index:3;
}
.at-hint.is-visible{ opacity:1; }

.at-placeholder{
  position:absolute;
  top:0; left:0; right:0; bottom:38%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:20px;
  text-align:center;
}
.at-placeholder span{
  font-weight:700;
  font-size:14.5px;
  color:var(--at-navy);
}
.at-placeholder small{
  font-size:12.5px;
  color:var(--at-ink-soft);
}

.at-banner{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  pointer-events:none;
  z-index:2;
}
.at-banner img{
  width:100%;
  height:auto;
  display:block;
  max-width:100%;
  filter:drop-shadow(0 6px 14px rgba(36,48,101,.35));
}

/* ---------- botão de upload ---------- */
.at-btn-upload{
  width:100%;
  padding:14px;
  border:1.5px dashed var(--at-navy) !important;
  border-radius:14px;
  background:rgba(36,48,101,.05);
  color:var(--at-navy);
  font-weight:700;
  font-size:14.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .15s ease;
}
.at-btn-upload:hover{ background:rgba(36,48,101,.1); }
.at-btn-upload svg{ flex:0 0 auto; }

/* ---------- zoom ---------- */
.at-zoom{ margin-top:22px; text-align:left; }
.at-zoom[hidden]{ display:none; }
.at-zoom-label{
  font-size:12.5px;
  font-weight:700;
  color:var(--at-ink-soft);
}
.at-zoom-val{
  font-weight:800;
  color:var(--at-navy);
}
#atFrameZoom{ margin-top:16px; }
.at-zoom-row{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.at-zoom-btn{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:50%;
  border:1.5px solid var(--at-line) !important;
  font-size:16px;
  font-weight:700;
  color:var(--at-navy);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
}
.at-zoom-btn:hover{ border-color:var(--at-azure) !important; color:var(--at-azure); }

.at-tool input[type="range"]{
  flex:1;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  padding:0;
  border:none;
  border-radius:2px;
  background:var(--at-line);
}
.at-tool input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--at-azure);
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(36,48,101,.4);
  cursor:pointer;
}
.at-tool input[type="range"]::-moz-range-thumb{
  width:16px; height:16px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--at-azure);
  cursor:pointer;
}

/* ---------- seletor de moldura ---------- */
.at-frames{ margin-top:26px; text-align:left; }
.at-label{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--at-ink-soft);
  margin:0 0 12px;
  text-transform:uppercase;
}
.at-frame-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.at-frame-opt{
  border:2px solid var(--at-line) !important;
  border-radius:14px;
  padding:12px 8px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  transition:border-color .15s ease;
}
.at-frame-opt:hover{ border-color:var(--at-azure) !important; }
.at-frame-opt.is-active{
  border-color:var(--at-navy) !important;
  background:rgba(36,48,101,.04);
}
.at-swatch{
  width:84px; height:84px;
  max-width:100%;
  border-radius:50%;
  flex:0 0 auto;
  background-size:cover;
  background-position:center;
}
.at-swatch-1{ background-image:url("../images/avatar/thumb1.jpg"); }
.at-swatch-2{ background-image:url("../images/avatar/thumb2.jpg"); }
.at-swatch-3{ background-image:url("../images/avatar/thumb3.jpg"); }
.at-opt-name{
  font-size:11.5px;
  font-weight:700;
  color:var(--at-navy);
  text-align:center;
  line-height:1.25;
}

/* ---------- download ---------- */
.at-btn-download{
  width:100%;
  margin-top:26px;
  padding:15px;
  border-radius:14px;
  background:var(--at-line);
  color:#8b97a8;
  font-weight:800;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:background .18s ease, color .18s ease, transform .1s ease;
}
.at-btn-download:not(:disabled){
  background:var(--at-navy);
  color:var(--at-gold);
}
.at-btn-download:not(:disabled):hover{
  transform:translateY(-1px);
  background:var(--at-navy-deep);
}
.at-btn-download:disabled{ cursor:not-allowed; }

.at-privacy{
  margin:16px 0 0;
  font-size:12px;
  color:var(--at-ink-soft);
}

/* ---------- aviso de navegador de aplicativo ---------- */
.at-inapp{
  margin-bottom:22px;
  padding:16px 14px;
  border-radius:14px;
  background:#fff6d6;
  border:1.5px solid var(--at-gold);
  text-align:center;
}
.at-inapp[hidden]{ display:none !important; }
.at-inapp-txt{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.5;
  color:var(--at-ink);
}
.at-inapp-btn{
  display:block;
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  background:var(--at-navy);
  color:var(--at-gold) !important;
  font-weight:800;
  font-size:14px;
  text-align:center;
  text-decoration:none !important;
  transition:background .18s ease;
}
.at-inapp-btn:hover,
.at-inapp-btn:focus{ background:var(--at-navy-deep); color:var(--at-gold) !important; }
.at-inapp-btn[hidden]{ display:none !important; }
.at-inapp-alt{ margin:10px 0 0; font-size:12px; }

/* passo a passo mostrado no iPhone quando o botão não consegue sair do app */
.at-ios-help{
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1.5px solid var(--at-navy);
  text-align:left;
}
.at-ios-help[hidden]{ display:none !important; }
.at-ios-title{
  margin:0 0 8px;
  font-size:13px;
  font-weight:800;
  color:var(--at-navy);
}
.at-ios-steps{
  margin:0;
  padding-left:18px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--at-ink);
}
.at-ios-steps li{ margin-bottom:5px; }
.at-ios-steps li:last-child{ margin-bottom:0; }
.at-dots{
  display:inline-block;
  padding:0 6px;
  border-radius:6px;
  background:var(--at-navy);
  color:#fff;
  font-weight:900;
  letter-spacing:1px;
  line-height:1.4;
}
.at-copied{
  display:inline-block;
  margin-left:6px;
  font-size:12px;
  font-weight:700;
  color:#1d7a4c;
}
.at-copied[hidden]{ display:none !important; }

/* ---------- resultado (navegador de app: salvar com toque longo) ---------- */
.at-result{
  margin-top:20px;
  padding:16px 14px 14px;
  border:2px solid var(--at-gold);
  border-radius:16px;
  background:#fffdf0;
  text-align:center;
}
.at-result[hidden]{ display:none !important; }
.at-result-title{
  margin:0 0 12px;
  font-size:14px;
  font-weight:800;
  color:var(--at-navy);
}
.at-result-img{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  margin:0 auto;
  border-radius:12px;
  box-shadow:0 10px 26px -8px rgba(36,48,101,.4);
  /* garante o menu "Salvar imagem" no toque longo */
  -webkit-touch-callout:default;
  touch-action:manipulation;
  pointer-events:auto;
}
.at-result-help{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--at-ink);
}
.at-result-alt{
  margin:12px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--at-ink-soft);
}
.at-result .at-inapp-btn{ margin-top:14px; }
.at-result-link{
  color:var(--at-azure);
  font-weight:700;
  text-decoration:underline;
}

.at-retry{
  margin:12px 0 0;
  font-size:12.5px;
  color:var(--at-ink-soft);
}
.at-retry[hidden]{ display:none !important; }
.at-link-btn{
  padding:0;
  font-size:12.5px;
  font-weight:700;
  color:var(--at-azure);
  text-decoration:underline;
}

.at-error{
  margin-top:14px;
  padding:10px 12px;
  border-radius:10px;
  background:#fdecec;
  border:1px solid #f3b9b9;
  color:#9c2b2b;
  font-size:12.5px;
  line-height:1.4;
  text-align:left;
}
.at-error[hidden]{ display:none; }

/* ---------- responsivo ---------- */
@media (max-width:991px){
  .at-tool{ margin-top:36px; }
}
@media (max-width:480px){
  .at-frame-options{ gap:8px; }
  .at-swatch{ width:64px; height:64px; }
  .at-opt-name{ font-size:10.5px; }
}
@media (prefers-reduced-motion:reduce){
  .at-tool *{ transition:none !important; }
}