/* App de Moldura — base mestre.
   As cores da campanha entram como variáveis, escritas pelo JS a partir da
   config. Nenhum valor de cliente vive neste arquivo. */
:root{
  --fundo:#0A1240;
  --destaque:#FFC400;
  --capa-a:#C7161D;
  --capa-b:#1B3FCC;
  --branco:#fff;
  --claro:rgba(255,255,255,.72);
  --linha:rgba(255,255,255,.14);
  --cartaz:'Archivo Black','Arial Black',system-ui,sans-serif;
  --texto:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
/* O atributo hidden vale display:none — mas qualquer regra de display na
   folha vence, porque o padrão do agente tem prioridade menor. Sem isto,
   esconder um elemento que é flex/grid simplesmente não acontece. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:var(--texto);
  background:var(--fundo);
  color:var(--branco);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
body.carregando{background:#0b1020}

.app{
  max-width:520px;margin:0 auto;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fundo) 78%,#fff 8%) 0%,var(--fundo) 42%);
  min-height:100dvh;
  display:flex;flex-direction:column;
}

/* ═════════ perfil ═════════ */
.app-perfil{position:relative;padding-bottom:14px}
/* Sem imagem de capa, o gradiente da campanha sustenta sozinho. Ele vai no
   background do próprio elemento (não num ::before com z-index negativo, que
   escapava do contexto de empilhamento e sumia atrás do perfil). Quando o
   cliente sobe uma capa, o JS põe a imagem por cima na mesma propriedade. */
.app-capa{
  height:clamp(96px,26vw,150px);
  position:relative;overflow:hidden;
  background-color:var(--capa-b);
  background-image:
    radial-gradient(120% 150% at 18% 0%, color-mix(in srgb,var(--destaque) 30%,transparent), transparent 58%),
    linear-gradient(118deg,var(--capa-a) 0%,var(--capa-b) 46%,var(--fundo) 100%);
  background-size:cover;background-position:center;
}
.app-capa::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:9px 9px;opacity:.4;
}

.app-identidade{
  position:relative;margin-top:calc(clamp(34px,8vw,52px) * -1);
  padding:0 clamp(16px,4vw,24px);
}
.app-avatar{
  position:relative;display:block;width:clamp(84px,22vw,110px);aspect-ratio:1;
  border-radius:50%;padding:3px;
  background:linear-gradient(135deg,var(--destaque),#FF8A00 60%,var(--destaque));
  box-shadow:0 8px 20px -8px rgba(0,0,0,.8);
}
.app-avatar[hidden]{display:none}
.app-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:2.5px solid var(--fundo);background:#1a1a22}
.app-verificado{
  position:absolute;right:-3px;bottom:-1px;width:32%;aspect-ratio:1;display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.app-verificado svg{width:100%;height:100%;display:block}

/* O quadro da marca ocupa a direita, então nome e bio param antes dele — o
   nome de campanha é longo por natureza ("Dr. Fulano de Tal") e passaria
   por baixo do logo. */
.app-nome{
  margin:10px 0 0;font-family:var(--cartaz);font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,5vw,27px);letter-spacing:.01em;color:var(--branco);line-height:1.05;
  max-width:calc(100% - 54%);
}
.app-bio{
  margin:3px 0 0;font-size:clamp(13px,3.4vw,15px);color:var(--claro);letter-spacing:.02em;
  max-width:calc(100% - 54%);
}

/* ═════════ o quadro da marca ═════════
   Mesmo enquadramento da headline da página de vendas: cantos em L, faixa
   diagonal e estrela. É a assinatura visual do produto. */
.quadro-logo{
  position:absolute;right:clamp(16px,6vw,30px);top:clamp(4px,1.4vw,9px);
  width:52%;min-height:clamp(84px,26vw,116px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(11px,2.4vw,17px);
  isolation:isolate;pointer-events:none;
}
.quadro-logo img{max-width:100%;max-height:clamp(64px,20vw,92px);object-fit:contain;display:block}
.quadro-logo::before,
.quadro-cantos::before,.quadro-cantos::after{
  content:"";position:absolute;
  width:clamp(19px,4.8vw,30px);height:clamp(19px,4.8vw,30px);
  border:2.5px solid var(--destaque);
}
.quadro-cantos{position:absolute;inset:0}
.quadro-logo::before{top:0;left:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.quadro-cantos::before{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 6px}
.quadro-cantos::after{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
.quadro-faixa{
  position:absolute;top:0;right:0;width:clamp(23px,5.4vw,34px);aspect-ratio:1;
  background:linear-gradient(225deg,var(--destaque) 0 46%,transparent 46%);
  border-radius:0 6px 0 0;z-index:-1;
}
.quadro-estrela{
  position:absolute;bottom:5px;left:8px;
  color:var(--destaque);font-size:clamp(10px,2.2vw,14px);
}
.logo-vazio{
  display:flex;flex-direction:column;line-height:.84;margin:0;text-align:center;
  font-family:var(--cartaz);font-weight:900;text-transform:uppercase;
  font-size:clamp(21px,5.4vw,32px);color:var(--branco);
}
.logo-vazio em{font-style:normal;color:var(--destaque)}

.app-convite{
  margin:16px clamp(16px,4vw,24px) 0;padding-top:14px;
  border-top:1px solid var(--linha);
  font-size:clamp(14px,3.6vw,16px);color:rgba(255,255,255,.8);
}
.app-chamada{
  margin:14px clamp(16px,4vw,24px) 6px;
  font-family:var(--cartaz);text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(11px,2.8vw,13px);color:var(--destaque);
}

/* ═════════ o editor de foto ═════════ */
.corpo{padding:0 clamp(16px,4vw,24px)}
.palco{position:relative;border-radius:16px;overflow:hidden;background:#0b1020}
canvas{width:100%;height:auto;display:block;touch-action:none;cursor:grab}
canvas:active{cursor:grabbing}

.convite{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:rgba(8,12,32,.55);backdrop-filter:blur(2px);
  border:0;color:var(--branco);cursor:pointer;font-family:inherit;
}
.convite strong{font-size:clamp(15px,4vw,18px)}
.convite span{font-size:clamp(12px,3.2vw,13px);color:var(--claro)}

.lado{padding:16px 0 4px}
.rotulo{
  margin:0 0 8px;font-family:var(--cartaz);text-transform:uppercase;
  letter-spacing:.12em;font-size:11px;color:var(--claro);
}
.galeria{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.thumb{
  flex:0 0 auto;width:76px;aspect-ratio:1;padding:0;border-radius:12px;overflow:hidden;
  border:2px solid transparent;background:#0b1020;cursor:pointer;
}
.thumb.ativa{border-color:var(--destaque)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

.controles{margin-top:16px}
.zoom{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--claro)}
.zoom input{flex:1;accent-color:var(--destaque)}
.acoes{display:flex;gap:10px;margin-top:12px}
.btn-sec{
  flex:1;padding:10px;border-radius:10px;cursor:pointer;font-family:inherit;font-size:14px;
  background:rgba(255,255,255,.08);border:1px solid var(--linha);color:var(--branco);
}
.btn-sec:hover{background:rgba(255,255,255,.14)}

/* ═════════ rodapé ═════════ */
.rodape-app{
  margin-top:auto;padding:20px clamp(16px,4vw,24px) 8px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.btn{
  width:100%;padding:15px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--cartaz);text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(14px,3.8vw,16px);
  background:var(--destaque);color:#101010;
}
.btn:hover{filter:brightness(1.08)}
.redes{display:flex;gap:14px}
.rede{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linha);color:var(--claro);
}
.rede:hover{color:var(--destaque);border-color:var(--destaque)}
.rede svg{width:20px;height:20px}

.assinatura{
  margin:0;padding:14px;text-align:center;
  font-size:11px;color:rgba(255,255,255,.4);
}
.assinatura a{color:rgba(255,255,255,.6)}

.aviso{
  max-width:420px;margin:22vh auto;padding:0 24px;text-align:center;
  font-size:15px;color:var(--claro);
}

/* ═════════ telas estreitas ═════════
   Vem no fim do arquivo de propósito: as regras acima têm a mesma
   especificidade, e num empate quem ganha é a última. Declarado antes, o
   media query perdia sem errar nada — o clássico "o CSS não aplicou". */
@media (max-width:430px){
  /* nome de campanha é longo; ao lado do quadro ele encavalava no logo */
  .app-nome,.app-bio{max-width:none}
  .quadro-logo{
    position:relative;right:auto;top:auto;
    width:100%;min-height:clamp(88px,24vw,120px);margin:16px 0 0;
  }
}