/* =========================================================
   Promoção "Nossa História Premia Você!" — Jacomar 60 Anos
   Layout fiel ao PDF 1024x768. Toda medida está em unidades
   do artboard (--u = 1/1024 da largura do palco), então a
   composição escala sem perder proporção.
   ========================================================= */

/* Subsets TrueType embutidos no PDF original (Exo 2 estática, OFL) — mesmos contornos do layout.
   Glifos ausentes no subset caem, por glifo, na Exo 2 variável abaixo. */

:root {
  --vermelho: #e6161e;       /* painéis */
  --vermelho-texto: #e83333; /* "Nossa", "ANIVERSÁRIO" */
  --vermelho-escuro: #b01922;/* texto do CTA, círculo do ícone */
  --amarelo: #ffee00;
  --branco: #ffffff;
  --grad-painel-top: #e83333;
  --grad-painel-bottom: #dc1f27;
  --grad-dir-left: #d4111e;
  --grad-dir-right: #e62e31;
  --fonte: "Exo 2", sans-serif;
  --fonte-ui: "Exo 2", sans-serif;
  /* baseline com line-height:1 = (1 + ascent - descent) / 2, por peso da Exo 2 estática */
  --bl-400: 0.899;
  --bl-700: 0.91;
  --bl-800: 0.915;
  --bl-900: 0.92;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte);
  color: var(--branco);
  background: #f26b21 url('../assets/img/bg-mobile.jpg') center / cover no-repeat fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Palco 1024x768 escalável ---------- */
.wrap {
  --stage-w: min(100vw, calc(100vh * 4 / 3));
  --stage-w: min(100dvw, calc(100dvh * 4 / 3));
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  /* Placa estendida (artboard -188..1212 x -44..809) alinhada ao palco: sem emenda no letterbox */
  background: #ea5a2a url('../assets/img/bg-wide.jpg') no-repeat;
  background-size: calc(var(--stage-w) * 1400 / 1024) auto;
  background-position: center calc(50% + var(--stage-w) * 1.5 / 1024);
  overflow: hidden;
}
.stage {
  --u: calc(100cqw / 1024);
  position: relative;
  width: min(100vw, calc(100vh * 4 / 3));
  width: min(100dvw, calc(100dvh * 4 / 3));
  aspect-ratio: 1024 / 768;
  container-type: inline-size;
  background: #f26b21 url('../assets/img/bg-desktop.jpg') 0 0 / 100% 100% no-repeat;
  isolation: isolate;
}

/* Caixa absoluta em coordenadas do artboard */
.abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0;
}
/* Texto posicionado pela baseline (--b) do artboard; --bl é a fração da baseline no line-box */
.t {
  --bl: var(--bl-800);
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--b) - var(--bl) * var(--fs)) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  line-height: 1;
  white-space: nowrap;
  margin: 0;
  font-weight: 800;
}
.w400 { font-weight: 400; --bl: var(--bl-400); }
.w700 { font-weight: 700; --bl: var(--bl-700); }
.w900 { font-weight: 900; --bl: var(--bl-900); }

/* ---------- Cabeçalho ---------- */
.brand__aniversario { font-weight: 900; --bl: var(--bl-900); color: var(--vermelho-texto); z-index: 4; }
.brand__logo { z-index: 4; }

/* ---------- Headline ---------- */
.headline { margin: 0; font-weight: 800; }
.hl { z-index: 4; }
.hl--nossa { color: var(--vermelho-texto); }
.hl--historia { color: var(--branco); }
.hl--premia { color: var(--amarelo); }
.hl--voce { color: var(--branco); }
.hl--excl { font-weight: 900; --bl: var(--bl-900); color: var(--branco); }
.hl--voce .hl--excl {
  /* "!" é filho de "você": recalcula a posição relativa ao span pai (mesma baseline) */
  left: calc((363.62 - 151.97) * var(--u));
  top: calc((var(--bl-800) * 93.33 - var(--bl-900) * 67.33) * var(--u));
}

/* ---------- Personagem ---------- */
.hero { z-index: 5; }
.hero__img { width: 100%; height: 100%; object-fit: contain; }
.hero__promo {
  font-weight: 700;
  --bl: var(--bl-700);
  color: var(--branco);
  letter-spacing: 0.078em;
  transform: rotate(7.97deg);
  transform-origin: 0 90%;
}

/* ---------- Decoração ---------- */
.deco {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  z-index: 8;
  pointer-events: none;
}
.deco--balao-esq   { width: calc(67 * var(--u));  height: calc(84 * var(--u));  transform: translate(calc(228.051636 * var(--u)), calc(12.025696 * var(--u))) matrix(0.923628, 0.380805, -0.377679, 0.916048, 0, 0); }
.deco--balao-dir   { width: calc(149 * var(--u)); height: calc(185 * var(--u)); transform: translate(calc(859.11261 * var(--u)), calc(204.247559 * var(--u))) matrix(0.995246, -0.0638594, 0.0639535, 0.996713, 0, 0); }
.deco--balao-baixo { width: calc(113 * var(--u)); height: calc(140 * var(--u)); transform: translate(calc(144.617081 * var(--u)), calc(599.114319 * var(--u))) matrix(0.910512, 0.392029, -0.393454, 0.913822, 0, 0); z-index: 1; }
.deco--moeda-topo  { width: calc(81 * var(--u));  height: calc(75 * var(--u));  transform: translate(calc(958.585693 * var(--u)), calc(104.817688 * var(--u))) matrix(-0.990866, -0.0884179, -0.0888504, 0.995714, 0, 0); }
.deco--moeda-meio  { width: calc(58 * var(--u));  height: calc(54 * var(--u));  transform: translate(calc(373.528198 * var(--u)), calc(324.92868 * var(--u))) matrix(-0.986354, -0.0880152, -0.0879604, 0.98574, 0, 0); }
.deco--moeda-baixo { width: calc(107 * var(--u)); height: calc(99 * var(--u));  transform: translate(calc(928.625244 * var(--u)), calc(645.474853 * var(--u))) matrix(-0.989599, -0.0883048, -0.0888032, 0.995184, 0, 0); }

/* ---------- Painéis ---------- */
.panel { color: var(--branco); }
.panel--premios {
  z-index: 3;
  border-radius: 0 calc(79.14 * var(--u)) calc(79.14 * var(--u)) 0;
}
/* Sombra: mancha vermelha desfocada só para a direita/baixo (como a "pílula" multiplicada do PDF) */
.panel--premios::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: calc(3 * var(--u)) calc(-8 * var(--u)) calc(-6 * var(--u)) 0;
  border-radius: 0 calc(86 * var(--u)) calc(86 * var(--u)) 0;
  background: rgba(150, 0, 0, 0.62);
  filter: blur(calc(3.5 * var(--u)));
}
/* Fundo do painel: stops medidos no PDF (de baixo para cima) */
.panel--premios::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, #db1e26 0%, #de2127 20%, #df2224 45%, #e22527 60%, #e42c2d 75%, #e73232 88%, #e83333 100%);
}
.panel--premios .t, .panel--premios .tag { z-index: 1; }
.panel--ganhadores {
  z-index: 2;
  border-radius: 0 calc(72.58 * var(--u)) calc(72.58 * var(--u)) 0;
  background: var(--vermelho);
}
.panel--participar {
  z-index: 9;
  border-radius: calc(104.66 * var(--u)) 0 0 calc(104.66 * var(--u));
  /* base horizontal + faixa vertical mais escura no meio (medida no PDF) */
  background:
    linear-gradient(to bottom, rgba(220, 0, 0, 0) 0%, rgba(220, 0, 0, 0.2) 20%, rgba(220, 0, 0, 0.5) 40%, rgba(220, 0, 0, 0.74) 60%, rgba(220, 0, 0, 0.74) 68%, rgba(220, 0, 0, 0.5) 86%, rgba(220, 0, 0, 0.35) 100%),
    linear-gradient(to right, var(--grad-dir-left), var(--grad-dir-right));
}

.p-mais, .p-de, .p-rs, .p-em, .g-mais, .g-de, .g-ganh { color: var(--branco); }
.p-valor, .p-inst { color: var(--amarelo); }
/* espaços entre palavras no PDF são mais estreitos que o glifo de espaço da fonte */
.p-valor { word-spacing: calc(-2.5 * var(--u)); }
.g-valor { color: var(--amarelo); font-weight: 900; --bl: var(--bl-900); word-spacing: calc(-3.2 * var(--u)); }
.g-ganh { letter-spacing: calc(0.25 * var(--u)); }

/* Tags (cupons) */
.tags { list-style: none; margin: 0; padding: 0; }
.tag {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(44.1 * var(--u));
  height: calc(20.16 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(var(--tag-pad) * var(--u));
  color: var(--vermelho);
  font-weight: 800;
  font-size: calc(var(--tag-fs) * var(--u));
  line-height: 1;
  --tag-fs: 15.33;
  --tag-pad: 1.17; /* baseline do número a 15.2 do topo da etiqueta (15.2 - 0.915 * 15.33) */
}
.tag__bg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--amarelo); }
.tag__txt { position: relative; display: inline-flex; align-items: baseline; }
.tag__txt small { font-size: calc(9.33 * var(--u)); font-weight: 700; }

/* Painel participar */
.participar__titulo { margin: 0; font-weight: 700; }
.participar__titulo .t { font-weight: 700; --bl: var(--bl-700); color: var(--branco); }
.participar__destaque { font-weight: 900 !important; --bl: var(--bl-900); color: var(--amarelo) !important; letter-spacing: calc(0.12 * var(--u)); }
.passos { list-style: none; margin: 0; padding: 0; }
.passo { font-weight: 400; --bl: var(--bl-400); color: var(--branco); letter-spacing: calc(-0.1 * var(--u)); }
.participar__titulo .t:nth-child(2) { letter-spacing: calc(0.14 * var(--u)); }
.passo b { font-weight: 700; }
.passo--multi {
  --bl: 0.991; /* (1.184 + asc - desc) / 2 */
  line-height: calc(15 / 12.67);
}
.passo::before {
  content: '';
  position: absolute;
  left: calc((78.18 - 93.16) * var(--u));
  top: calc((var(--by) - 0.28 - var(--b) + var(--bl) * var(--fs)) * var(--u));
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  background: var(--amarelo);
  border-radius: 50%;
  -webkit-mask: url('../assets/svg/bullet.svg') center / contain no-repeat;
  mask: url('../assets/svg/bullet.svg') center / contain no-repeat;
}

/* ---------- Logo Jacomar ---------- */
.logo-jacomar { z-index: 7; }

/* ---------- CTA ---------- */
.cta {
  z-index: 6;
  display: block;
  background: var(--branco);
  border-radius: calc(11 * var(--u));
  color: var(--vermelho-escuro);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover, .cta:focus-visible { transform: translateY(calc(-1 * var(--u))); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(140, 0, 10, 0.4); outline: none; }
.cta__txt { font-weight: 700; --bl: var(--bl-700); }
.cta__txt b { font-weight: 900; }

/* ---------- Botões ---------- */
.btn {
  z-index: 6;
  display: block;
  border: calc(0.72 * var(--u)) solid var(--branco);
  border-radius: calc(15.7 * var(--u));
  background: transparent;
  color: var(--branco);
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn:hover, .btn:focus-visible { background: rgba(255, 255, 255, 0.14); outline: none; }
.btn__txt { font-weight: 700; --bl: var(--bl-700); }
/* borda soma ao box: compensa para manter ícone/texto na posição do artboard */
.btn .abs, .btn .t { margin-left: calc(-0.72 * var(--u)); margin-top: calc(-0.72 * var(--u)); }

/* ---------- Rodapé ---------- */
.legal {
  height: auto; 
  text-align: center;
  z-index: 1000;
  width: 100vw;
  position: absolute;
  left: -17vw;
}
.legal p {
  margin: 0;
  font-family: var(--fonte-ui);
  font-size: calc(10 * var(--u));
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: 0;
  white-space: normal;
  text-wrap: balance;
  overflow:visible;
  width: 100%;
}
.legal a:hover { text-decoration: underline; }

/* ---------- Modal de prêmios ---------- */
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 520px);
  width: 100%;
  color: var(--branco);
}
.modal::backdrop { background: rgba(60, 0, 0, 0.6); backdrop-filter: blur(2px); }
.modal__box {
  position: relative;
  margin: 0;
  padding: 32px 28px 24px;
  border-radius: 28px;
  background: linear-gradient(to top, var(--grad-painel-bottom), var(--grad-painel-top));
  box-shadow: 0 18px 50px rgba(80, 0, 0, 0.5);
  font-family: var(--fonte-ui);
}
.modal__close {
  position: absolute; right: 14px; top: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.15); color: var(--branco);
  font: 700 22px/1 var(--fonte-ui); cursor: pointer;
}
.modal__close:hover { background: rgba(255, 255, 255, 0.28); }
.modal__titulo { margin: 0 0 6px; font-size: 30px; font-weight: 900; line-height: 1; }
.modal__titulo span { color: var(--amarelo); }
.modal__sub { margin: 0 0 18px; font-size: 14px; font-weight: 400; opacity: .95; }
.modal__tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.modal__tabela th { text-align: left; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; padding: 0 8px 8px; }
.modal__tabela td { padding: 9px 8px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-weight: 400; }
.modal__tabela td:first-child, .modal__tabela th:first-child { text-align: right; width: 24%; }
.modal__tabela td:last-child, .modal__tabela th:last-child { text-align: right; }
.modal__tabela .valor { display: inline-block; background: var(--amarelo); color: var(--vermelho); font-weight: 800; padding: 3px 10px; border-radius: 6px; }
.modal__tabela tfoot td { font-weight: 800; border-top: 2px solid rgba(255, 255, 255, 0.45); }
.modal__nota { margin: 16px 0 0; font-size: 12px; font-weight: 400; opacity: .9; }
.modal__nota a { text-decoration: underline; }

/* =========================================================
   Mobile / retrato: reflow vertical mantendo a identidade
   ========================================================= */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
  .wrap { display: block; background: #f26b21 url('../assets/img/bg-mobile.jpg') center / cover no-repeat fixed; }
  .p-line { display: block; }
  .stage {
    --u: min(calc(100cqw / 430), 1.3px); /* tablet retrato: não deixa a escala explodir */
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: calc(22 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u));
    gap: calc(16 * var(--u));
  }
  .abs, .t { position: relative; left: auto; top: auto; margin: 0; }

  /* Cabeçalho */
  .brand { display: flex; flex-direction: column; align-items: center; }
  .brand__aniversario { font-size: calc(20 * var(--u)); }
  .brand__logo { width: calc(150 * var(--u)); height: auto; margin-top: calc(6 * var(--u)); }

  /* Headline */
  .headline { display: flex; flex-direction: column; margin: calc(4 * var(--u)) 0 0; }
  .hl { font-size: calc(var(--fs) * 0.66 * var(--u)); }
  .hl--historia { padding-left: calc(40 * var(--u)); margin-top: calc(-4 * var(--u)); }
  .hl--premia { margin-top: calc(-10 * var(--u)); }
  .hl--voce { padding-left: calc(70 * var(--u)); margin-top: calc(-18 * var(--u)); }
  .hl--voce .hl--excl { position: static; font-size: calc(67.33 * 0.66 * var(--u)); }

  /* Personagem */
  .hero { width: 100%; height: auto; margin: calc(-10 * var(--u)) auto 0; max-width: calc(380 * var(--u)); }
  .hero__img { height: auto; }
  .hero__promo { position: absolute; left: 58.1%; top: 9.3%; font-size: calc(8.67 * 0.7 * var(--u)); transform: rotate(7.97deg); transform-origin: 0 90%; }
  .deco { display: none; }

  /* Painéis */
  .panel { width: 100%; height: auto; }
  .panel--premios { padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u)); border-radius: 0 calc(60 * var(--u)) calc(60 * var(--u)) 0; margin-right: calc(10 * var(--u)); width: auto; }
  .panel--premios .t { display: inline-block; font-size: calc(var(--fs) * var(--u)); vertical-align: baseline; }
  .p-de { margin-left: calc(6 * var(--u)); }
  .p-line--valor { margin-top: calc(2 * var(--u)); }
  .p-valor { margin-left: calc(4 * var(--u)); }
  .p-em { margin-top: calc(6 * var(--u)); }
  .p-inst { margin-top: calc(2 * var(--u)); }
  .tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); }
  .tag { position: relative; left: auto; top: auto; width: calc(62 * var(--u)); height: calc(28.3 * var(--u)); font-size: calc(21.5 * var(--u)); }
  .tag__txt small { font-size: calc(13 * var(--u)); }
  .tag__txt { transform: translateY(calc(-2 * var(--u))); }

  .panel--ganhadores { padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u)); border-radius: 0 calc(60 * var(--u)) calc(60 * var(--u)) 0; margin-right: calc(40 * var(--u)); width: auto; }
  .panel--ganhadores .t { display: inline-block; font-size: calc(var(--fs) * var(--u)); }
  .g-de { margin-left: calc(6 * var(--u)); }
  .g-valor { display: block !important; margin-top: calc(-2 * var(--u)); }
  .g-ganh { display: block !important; margin-top: calc(-2 * var(--u)); }

  .panel--participar { padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u)); border-radius: calc(40 * var(--u)) 0 0 calc(40 * var(--u)); margin-left: calc(10 * var(--u)); width: auto; background: linear-gradient(to right, var(--grad-dir-left), var(--grad-dir-right)); }
  .participar__titulo { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
  .participar__titulo .t { font-size: calc(18 * var(--u)); }
  .passos { margin-top: calc(14 * var(--u)); display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
  .passo { font-size: calc(14.5 * var(--u)); white-space: normal; line-height: 1.25; padding-left: calc(16 * var(--u)); }
  .passo--multi { top: auto; }
  .passo--multi br { display: none; }
  .passo::before, .passo--multi::before { left: 0; top: calc(0.35em); width: calc(8.5 * var(--u)); height: calc(8.5 * var(--u)); }

  /* Logo Jacomar */
  .logo-jacomar { width: calc(300 * var(--u)); height: auto; margin: calc(4 * var(--u)) auto 0; }

  /* CTA */
  .cta { width: 100%; height: auto; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); }
  .cta__icon { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; }
  .cta__txt { font-size: calc(14 * var(--u)); white-space: normal; line-height: 1.2; }

  /* Botões */
  .acoes { display: flex; justify-content: center; gap: calc(12 * var(--u)); flex-wrap: wrap; }
  .btn { width: auto; height: auto; display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); border-width: 1px; border-radius: 999px; }
  .btn .abs, .btn .t { margin: 0; }
  .btn__icon { width: calc(14 * var(--u)); height: auto; }
  .btn__txt { font-size: calc(12 * var(--u)); }

  /* Rodapé */
  .legal { width: 100%; height: auto; }
  .legal p { font-size: max(11px, calc(10 * var(--u))); white-space: normal; line-height: 1.35; }
  .legal a { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .btn { transition: none; }
}