/* Tô Junto — estilos. Sem framework, sem fonte externa: carrega rápido no 4G. */

:root{
  --vinho:#8A0F30;
  --vinho-escuro:#680B24;
  --ocre:#E9BC3F;
  --ocre-escuro:#C29A2A;
  --off:#FAF6F0;
  --preto:#111111;
  --raio:18px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(201,144,47,.35);}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

body{
  background:var(--off);
  color:var(--preto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:19px;
  line-height:1.45;
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- estrutura ---------- */
.topo{
  background:var(--vinho);
  color:var(--off);
  padding:14px 18px calc(14px + env(safe-area-inset-top,0px));
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:20;
}
.topo .marca{font-weight:800;font-size:19px;letter-spacing:.5px;}
.topo .voltar{
  background:rgba(250,246,240,.15);border:0;color:var(--off);
  font-size:17px;font-weight:700;padding:10px 14px;border-radius:12px;cursor:pointer;
  min-height:44px;
}
.topo .voltar[hidden]{display:none;}

main{padding:20px 18px 40px;max-width:560px;margin:0 auto;}
section[hidden]{display:none !important;}

h1{font-size:34px;line-height:1.1;margin:8px 0 10px;font-weight:900;color:var(--vinho);}
h2{font-size:26px;line-height:1.15;margin:0 0 8px;font-weight:900;color:var(--vinho);}
p.sub{font-size:20px;margin:0 0 22px;color:#3a3a3a;}

/* ---------- botões ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:66px;
  border:0;border-radius:var(--raio);
  font-size:22px;font-weight:900;letter-spacing:.3px;
  padding:14px 18px;margin:0 0 14px;
  cursor:pointer;text-decoration:none;text-align:center;
  font-family:inherit;
}
.btn-gigante{min-height:80px;font-size:26px;}
.btn-ocre{background:var(--ocre);color:var(--preto);box-shadow:0 5px 0 var(--ocre-escuro);}
.btn-ocre:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ocre-escuro);}
.btn-vinho{background:var(--vinho);color:var(--off);box-shadow:0 5px 0 var(--vinho-escuro);}
.btn-vinho:active{transform:translateY(3px);box-shadow:0 2px 0 var(--vinho-escuro);}
.btn-linha{background:transparent;color:var(--vinho);border:3px solid var(--vinho);font-size:20px;min-height:60px;}
.btn-fraco{background:#EDE6DB;color:#3a3a3a;font-size:18px;min-height:54px;font-weight:700;}

.secundarios{margin-top:26px;padding-top:20px;border-top:2px dashed #DCD2C4;}

/* ---------- editor ---------- */
.palco{
  position:relative;width:100%;aspect-ratio:1/1;
  background:#2a2a2a;border-radius:var(--raio);overflow:hidden;
  margin-bottom:16px;touch-action:none;
}
@supports not (aspect-ratio:1/1){ .palco{height:min(88vw,520px);} }
#lona{display:block;width:100%;height:100%;touch-action:none;}
.dica-arrasta{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(17,17,17,.72);color:#fff;font-size:16px;font-weight:700;
  padding:10px 12px;text-align:center;pointer-events:none;
}
.controles{display:flex;gap:12px;margin-bottom:16px;}
.controles .btn{margin:0;flex:1;min-height:72px;font-size:24px;}
.zoom-txt{font-size:17px;font-weight:800;}

/* ---------- resultado ---------- */
.resultado-caixa{text-align:center;margin-bottom:18px;}
#resultado{width:100%;max-width:420px;border-radius:var(--raio);display:block;margin:0 auto 10px;box-shadow:0 8px 24px rgba(17,17,17,.18);}

/* ---------- avisos e ajuda ---------- */
.aviso{
  background:#FFF3D6;border-left:8px solid var(--ocre);
  padding:16px;border-radius:12px;margin:0 0 18px;font-size:18px;
}
.aviso strong{display:block;margin-bottom:4px;}
.aviso[hidden]{display:none;}
.erro{background:#FDE6E6;border-left-color:#B3261E;}

/* ---------- listas de figurinhas / materiais ---------- */
.grade{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;}
.grade .item{background:#fff;border-radius:14px;padding:10px;text-align:center;box-shadow:0 2px 8px rgba(17,17,17,.10);}
.grade .item img{width:100%;height:auto;display:block;border-radius:10px;background:#EDE6DB;}
.grade .item .btn{margin:10px 0 0;min-height:52px;font-size:17px;}

.lista .item{background:#fff;border-radius:14px;padding:14px;margin-bottom:16px;box-shadow:0 2px 8px rgba(17,17,17,.10);}
.lista .item img{width:100%;height:auto;display:block;border-radius:10px;background:#EDE6DB;margin-bottom:12px;}
.lista .item h3{margin:0 0 10px;font-size:20px;color:var(--vinho);}
.lista .dupla{display:flex;gap:10px;}
.lista .dupla .btn{margin:0;flex:1;min-height:56px;font-size:18px;}

/* ---------- passo a passo ---------- */
ol.passos{padding-left:26px;margin:0 0 20px;font-size:18px;}
ol.passos li{margin-bottom:10px;}

/* ---------- rodapé legal ---------- */
footer{
  background:var(--preto);color:#CFCFCF;
  padding:24px 18px calc(28px + env(safe-area-inset-bottom,0px));
  font-size:14px;line-height:1.55;
}
footer .legal{max-width:560px;margin:0 auto;}
footer strong{color:var(--off);}
footer a{color:var(--ocre);}
.redes{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;}
.redes a{
  background:rgba(250,246,240,.12);color:var(--off);text-decoration:none;
  padding:12px 16px;border-radius:12px;font-weight:700;font-size:16px;min-height:44px;
  display:flex;align-items:center;
}

/* ---------- carregando ---------- */
.carregando{
  position:fixed;inset:0;background:rgba(250,246,240,.94);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  z-index:50;font-size:22px;font-weight:800;color:var(--vinho);text-align:center;padding:24px;
}
.carregando[hidden]{display:none;}
.girando{
  width:56px;height:56px;border:7px solid #E3D8C8;border-top-color:var(--vinho);
  border-radius:50%;animation:gira 1s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .girando{animation-duration:2.5s;} }

/* input de arquivo escondido */
#entradaFoto{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

/* telas maiores */
@media (min-width:600px){
  body{font-size:20px;}
  h1{font-size:40px;}
}

.tranquilo{font-size:16px;color:#5a5148;text-align:center;margin:-4px 0 0;}

/* Telas baixas (Android antigo 360x640): o botao principal do editor
   PRECISA aparecer sem rolar. Compacta cabecalho e palco. */
.palco{max-width:min(100%,46vh);margin-left:auto;margin-right:auto;}
@media (max-height:720px){
  #tela-editor .sub{display:none;}
  #tela-editor h2{font-size:21px;margin-bottom:6px;}
  main{padding-top:12px;}
  .controles .btn{min-height:62px;font-size:21px;}
  .btn-gigante{min-height:72px;font-size:23px;}
}

/* Linha de dois botoes secundarios (menos peso visual no editor) */
.dupla-fraca{display:flex;gap:10px;}
.dupla-fraca .btn{margin:0;flex:1;}

/* Confirmacao de que a foto foi salva */
.salvou{
  background:#E7F4E4;border-left:8px solid #2E7D32;
  padding:14px 16px;border-radius:12px;margin:0 0 18px;
  font-size:18px;line-height:1.4;
}

/* ---------- tira de molduras ---------- */
.rotulo-tira{font-size:16px;font-weight:800;color:#5a5148;margin:0 0 6px;}
.rotulo-tira[hidden]{display:none;}
.molduras-tira{
  display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:4px 2px 8px;margin:0 0 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.molduras-tira[hidden]{display:none;}
.mini-moldura{
  flex:0 0 auto;width:64px;height:64px;padding:0;
  border:3px solid #DCD2C4;border-radius:12px;background:#fff;
  cursor:pointer;overflow:hidden;line-height:0;
}
.mini-moldura img{width:100%;height:100%;display:block;object-fit:cover;}
.mini-moldura.escolhida{border-color:var(--ocre);box-shadow:0 0 0 3px rgba(201,144,47,.35);}

/* figurinhas agora tem dois botoes */
.grade .item .btn + .btn{margin-top:8px;}

/* ---------- ajuste de altura depois da tira de molduras ----------
   O botao BAIXAR MINHA FOTO tem que caber na primeira tela em TODO
   aparelho. Compactamos o palco e a tira para garantir isso. */
.palco{max-width:min(100%,38vh);}
.rotulo-tira{font-size:15px;margin:0 0 4px;}
.molduras-tira{gap:8px;padding:3px 2px 6px;margin:0 0 10px;}
.mini-moldura{width:56px;height:56px;border-width:3px;}
#tela-editor h2{margin:4px 0 6px;}
#tela-editor .sub{margin-bottom:10px;}

@media (max-height:720px){
  .mini-moldura{width:50px;height:50px;}
  .rotulo-tira{font-size:14px;}
}

/* Aparelhos bem pequenos e antigos (320x568): o botao principal continua
   tendo que aparecer sem rolar. Compacta o maximo sem perder legibilidade. */
@media (max-height:600px){
  .topo{padding-top:8px;padding-bottom:8px;}
  main{padding:8px 14px 30px;}
  #tela-editor h2{font-size:19px;margin:0 0 4px;}
  .rotulo-tira{font-size:13px;margin:0 0 3px;}
  .mini-moldura{width:44px;height:44px;border-width:2px;}
  .molduras-tira{gap:6px;padding:2px 2px 4px;margin:0 0 8px;}
  .palco{max-width:min(100%,34vh);margin-bottom:10px;}
  .controles{gap:8px;margin-bottom:10px;}
  .controles .btn{min-height:54px;font-size:19px;}
  .btn-gigante{min-height:64px;font-size:21px;}
}

/* rotulo de cada album de fotos do evento */
.rotulo-album{font-size:18px;font-weight:800;color:var(--vinho);margin:0 0 8px;}

/* Bloco de privacidade / LGPD no rodape */
.bloco-lgpd{
  border-top:1px solid rgba(250,246,240,.22);
  margin-top:18px;padding-top:16px;
}
.bloco-lgpd strong:first-child{
  display:block;color:var(--ocre);font-size:15px;
  letter-spacing:.4px;margin-bottom:8px;text-transform:uppercase;
}
.bloco-lgpd p{margin:0 0 10px;}
.bloco-lgpd a{word-break:break-word;}