/* ===== Arte =====
   Medidas tiradas da arte de referência (1024×1536). A estrutura é fixa;
   só a manchete, o texto de apoio e a lista de propostas mudam. */
.poster {
  --cor: #FB3A7B;
  --cor2: #FFD21F;
  --fundo: #111320;
  --linha: #2A2A46;
  --texto: #F7F7FA;
  --suave: #D9DAE3;
  --verde: #23DD7F;
  --verde-e: #12AF66;
  --rs: 1;
  /* alturas das faixas verticais (formato 2:3) */
  --topo-h: 212px;
  --hero-h: 382px;
  --lista-h: 489px;
  --faixa-h: 158px;
  --urna-h: 158px;
  --rod-h: 80px;
  width: 1024px;
  height: 1536px;
  background: var(--cor);
  padding: 28px 26px;
  position: relative;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  box-sizing: border-box;
}
.poster *, .poster *::before, .poster *::after { box-sizing: border-box; }
.poster svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Upheaval: maiúscula = 0,5em; com line-height 0,8 o topo da maiúscula fica a 0,2em do topo da linha. */
.px { font-family: "Upheaval", monospace; font-weight: 400; line-height: 0.8; white-space: nowrap; }
.sp { text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap; }
.tec { font-family: "Rajdhani", sans-serif; font-weight: 600; text-transform: uppercase; }

.miolo {
  position: relative;
  height: 100%;
  background: var(--fundo);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
}
.entalhe { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--cor); z-index: 6; margin-top: -17px; }
.entalhe.e { left: -21px; }
.entalhe.d { right: -21px; }

/* ---------- Topo ---------- */
.topo { position: relative; z-index: 4; height: var(--topo-h); flex: none; }
.punho { position: absolute; left: 36px; top: 50px; width: 80px; }
.punho .ico-p { width: 80px; height: 94px; }
.punho .barra { height: 22px; width: 54px; background: var(--cor); margin: 20px 0 0 16px; border-radius: 3px; }
.nomes { position: absolute; left: 139px; top: 40px; }
.nomes .n1, .nomes .n2 { display: block; line-height: 0.8; }
.nomes .n2 { color: var(--cor); margin-top: -2px; }
.nomes .logo-img img { height: 124px; display: block; }
.cargo { position: absolute; left: 142px; top: 166px; display: flex; align-items: flex-end; gap: 13px; }
.cargo .sp { font-size: 22px; letter-spacing: 0.2em; font-weight: 400; line-height: 1; padding-bottom: 2px; }
.cargo .px { color: var(--cor); }
.tags { position: absolute; left: 753px; top: 38px; }
.tags .sp { font-size: 17px; letter-spacing: 0.32em; line-height: 25px; white-space: pre; font-weight: 600; }
.tags .ico-h { position: absolute; left: 151px; top: 74px; width: 46px; height: 42px; }
.sep { height: 2px; flex: none; background: var(--linha); margin: 0 14px; position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; height: var(--hero-h); flex: none; }
.chamada { position: absolute; left: 46px; top: 19px; width: 470px; z-index: 3; }
.manchete .ml { display: block; line-height: 0.8; }
.manchete .ml.hl { color: var(--cor); position: relative; }
.manchete .hl { color: var(--cor); }
.chamada .sub { font-size: 24px; line-height: 28px; color: var(--suave); margin: 19px 0 0 5px; max-width: 388px; }

.chips { display: flex; gap: 10px; margin-bottom: 18px; }
.chip { font-family: "CutePixel", monospace; font-size: 20px; padding: 8px 12px 7px; background: var(--cor); color: var(--fundo); border-radius: 4px; }
.chip.o { background: transparent; color: var(--cor); box-shadow: inset 0 0 0 3px var(--cor); }
.ptitulo { line-height: 1.12; white-space: normal; }
.ptitulo .hl { color: var(--cor); }

.foto { position: absolute; left: 442px; width: 377px; top: -126px; bottom: 4px; z-index: 1; overflow: hidden; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 100%; }

.balao { position: absolute; left: 804px; top: 31px; width: 158px; z-index: 3; }
.balao .caixa {
  background: var(--cor); color: #0B0C14; height: 147px;
  padding: 19px 0 0 32px; border-radius: 6px;
  box-shadow: inset -6px -6px 0 rgba(0,0,0,.22), inset 4px 4px 0 rgba(255,255,255,.18);
}
.balao .caixa .px { display: block; white-space: pre; line-height: 0.75; }
.balao .rabo { position: absolute; left: 10px; top: 145px; width: 22px; height: 22px; }
.lateral { position: absolute; left: 842px; top: 216px; width: 140px; transform: skewY(-9deg); transform-origin: 0 0; z-index: 3; }
.lateral .tec { white-space: nowrap; font-size: 18.5px; line-height: 23px; letter-spacing: 0.02em; }
.risco { height: 10px; width: 62px; background: var(--cor); border-radius: 5px; margin-top: 16px; }

/* ---------- Lista de propostas ---------- */
.lista {
  height: var(--lista-h); flex: none; margin: 0 33px 0 32px;
  border: 2px solid var(--linha); border-radius: 12px;
  display: flex; position: relative; z-index: 2; background: var(--fundo);
}
.linhas { width: 748px; flex: none; display: flex; flex-direction: column; padding: 2px 28px 2px 26px; border-right: 2px solid var(--linha); }
.item { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: calc(29px * var(--rs)); padding-left: 8px; border-bottom: 2px solid var(--linha); }
.item:last-child { border-bottom: 0; }
.tile { width: calc(96px * var(--rs)); height: calc(76px * var(--rs)); flex: none; border-radius: 10px; background: var(--c); display: grid; place-items: center; }
.tile .ico { width: 54%; aspect-ratio: 1; }
.item .t { font-size: calc(34px * var(--rs)); line-height: 0.78; color: var(--c); white-space: normal; }
.item .d { font-size: calc(25px * var(--rs)); line-height: 1.12; margin-top: calc(6px * var(--rs)); }
.lado { flex: 1; position: relative; }
.lado .conteudo { position: absolute; left: 36px; top: 50%; margin-top: -44px; width: 104px; transform: skewY(-13deg); transform-origin: 0 50%; }
.lado .tec { white-space: nowrap; font-size: 24px; line-height: 33px; letter-spacing: 0.05em; }
.lado .risco { margin-top: 12px; }

/* ---------- Faixa ---------- */
.faixa { position: relative; height: var(--faixa-h); flex: none; margin: 13px 20px 0 19px; border: 2px solid var(--cor); border-radius: 8px; }
.faixa::after { content: ""; position: absolute; inset: 6px; border: 2px solid color-mix(in srgb, var(--cor) 60%, transparent); border-radius: 5px; pointer-events: none; }
.faixa .trofeu { position: absolute; left: 95px; top: 50%; margin-top: -49px; width: 96px; height: 96px; }
.faixa .f1, .faixa .f2 { position: absolute; line-height: 0.8; }
.faixa .f1 { left: 225px; }
.faixa .f2 { left: 229px; color: var(--cor); }

/* ---------- Urna ---------- */
.urna { position: relative; height: var(--urna-h); flex: none; margin: 14px 20px 0 19px; border: 2px solid var(--cor); border-radius: 8px; }
.urna .lbl { position: absolute; left: 38px; top: 6px; font-size: 23px; letter-spacing: 0.14em; }
.digitos { position: absolute; left: 34px; top: 38px; display: flex; gap: 9px; }
.digito { width: 88px; height: 91px; border: 3px solid #fff; border-radius: 7px; text-align: center; font-family: "CutePixel", monospace; font-size: 110px; line-height: 85px; background: #0B0C14; overflow: hidden; }
.botao { position: absolute; left: 532px; top: 16px; width: 378px; height: 122px; }
.botao .b {
  height: 100%; border-radius: 8px; background: var(--verde); color: #0B0C14;
  box-shadow: inset 0 -16px 0 var(--verde-e), inset 0 5px 0 rgba(255,255,255,.35);
  display: grid; place-items: center; padding: 0 0 14px;
}

/* ---------- Rodapé ---------- */
.rodape { height: var(--rod-h); flex: none; display: flex; align-items: center; padding: 16px 52px 0 46px; }
.rodape .ico-h { width: 26px; height: 24px; flex: none; }
.rodape .r1 { color: var(--cor); font-size: 18px; letter-spacing: 0.14em; margin-left: 14px; }
.rodape .traco { flex: 1; height: 2px; background: var(--cor); opacity: .8; margin: 0 40px 0 38px; }
.rodape .r2 { font-size: 18px; letter-spacing: 0.14em; }
.rodape .r2 b { color: var(--cor); font-weight: 700; margin-left: 8px; letter-spacing: 0.08em; font-size: 21px; }
.legal { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-size: 13px; font-weight: 600; color: rgba(17,19,32,.85); letter-spacing: .02em; }