/* ===== Card de convidado — fonte única do visual =====
   Usado por index.html (render por URL / lote) e gerador.html (app).
   Tokens calibrados na referência Tony Bernardini. Mude aqui, nunca card a card. */

:root{
  --card-w: 1080px;            /* formato feed 4:5 */
  --card-h: 1350px;
  --laranja: #EE6A2A;          /* laranja da marca (botão, borda do pill, "master.") */
  --laranja-escuro: #D9481B;
  --laranja-glow: rgba(240,110,40,.45);
  --carvao: #1a1a1c;           /* topo da imagem: cinza-carvão dessaturado */
  --fundo-rodape: rgba(18,10,6,.92);
  --grade-cor: rgba(255,255,255,.055);
  --grade-passo: 67.5px;       /* 16 colunas em 1080px */
  --texto: #ffffff;
  --fonte: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

.card{
  position:relative;width:var(--card-w);height:var(--card-h);overflow:hidden;
  background:var(--carvao);flex:none;color:var(--texto);font-family:var(--fonte);
  box-sizing:border-box;
}
.card > *{position:absolute;box-sizing:border-box}

/* 1. Pessoa: uma <img> posicionada por transform (translate x,y + scale).
      escala = largura renderizada ÷ 1080. Em modo foto cobre o card; em modo recorte
      (PNG com alfa) ganha sombra e o fundo de estúdio aparece por baixo. */
.card .pessoa{left:0;top:0;width:var(--card-w);transform-origin:0 0;display:block}
.card.modo-recorte .pessoa{
  filter:saturate(.96) contrast(1.04) brightness(.97) drop-shadow(0 30px 60px rgba(0,0,0,.55))}

/* 1b. Fundo de estúdio (só no modo recorte) */
.card .fundo{inset:0;display:none;background:
  radial-gradient(70% 60% at 78% 45%, rgba(238,106,42,.95) 0%, rgba(190,80,30,.75) 30%, rgba(90,40,18,.35) 60%, rgba(0,0,0,0) 80%),
  radial-gradient(60% 50% at 15% 30%, rgba(70,70,74,.55) 0%, rgba(0,0,0,0) 70%),
  linear-gradient(180deg,#232325 0%,#2a2624 45%,#1a110b 100%)}
.card.modo-recorte .fundo{display:block}

/* 2. Degradê vertical: carvão no topo → transparente no meio → laranja quente → quase preto no rodapé */
.card .degrade{inset:0;background:
  linear-gradient(180deg,
    rgba(26,26,28,.85) 0%,
    rgba(26,26,28,.45) 14%,
    rgba(26,26,28,0)   34%,
    rgba(120,55,20,0)  58%,
    rgba(120,55,20,.28) 72%,
    rgba(18,10,6,.80)  86%,
    var(--fundo-rodape) 100%)}

/* 2b. Glow laranja à direita + sombra fria à esquerda */
.card .luz{inset:0;background:
  radial-gradient(60% 55% at 100% 62%, var(--laranja-glow) 0%, rgba(240,110,40,0) 70%),
  linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%)}

/* 3. Grade fina, some do meio pra baixo */
.card .grade{inset:0;
  background-image:
    linear-gradient(90deg, var(--grade-cor) 1px, transparent 1px),
    linear-gradient(180deg, var(--grade-cor) 1px, transparent 1px);
  background-size:var(--grade-passo) var(--grade-passo);
  background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 40%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.35) 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 40%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.35) 100%)}

/* 4. Logo: sempre igual. PNG oficial (logo.png) substitui o placeholder em texto */
.card .logo{top:60px;left:0;right:0;display:flex;justify-content:center}
.card .logo img{height:96px}
.card .logo .logo-texto{font-weight:800;line-height:.92;letter-spacing:-.02em;font-size:47px;text-align:left}
.card .logo .logo-texto .l1{display:block;color:#fff;position:relative;padding-left:14px}
.card .logo .logo-texto .l1::before{content:"";position:absolute;left:0;top:4px;width:10px;height:10px;background:var(--laranja);transform:skewX(-20deg)}
.card .logo .logo-texto .l2{display:block;color:var(--laranja);padding-left:82px}
.card .logo .logo-texto .l2 i{font-style:normal;color:#fff}

/* 5. Textos */
.card [contenteditable]{outline:none;cursor:text}
.card [contenteditable]:focus{outline:2px dashed rgba(255,255,255,.35);outline-offset:6px}
.card .eyebrow{top:983px;left:0;right:0;text-align:center;font-size:32px;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.card .nome{top:1035px;left:60px;right:60px;text-align:center;font-size:74px;font-weight:700;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}

/* 6. Rodapé: pill de data (contorno) + botão (sólido) */
/* Sempre centrado: os dois ficam com largura do conteúdo; se não couberem em 888px,
   o card.js reduz a fonte dos dois até caber. */
.card .rodape{left:96px;right:96px;top:1168px;height:78px;display:flex;gap:24px;align-items:stretch;justify-content:center}
.card .pill,.card .botao{display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:31px;white-space:nowrap;padding:0 28px;flex:0 0 auto}
.card .pill{min-width:420px;border:2.5px solid var(--laranja);background:rgba(20,12,8,.55);font-weight:500}
.card .pill b{font-weight:700}
.card .botao{flex:0 0 auto;min-width:348px;font-weight:700;font-size:33px;text-transform:uppercase;letter-spacing:.01em;
  background:linear-gradient(180deg,#F5722F 0%, var(--laranja) 55%, var(--laranja-escuro) 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.35)}