/* ============================================================================
 * cartaz.css — cópia adaptada de layouts/shared/cartazA4/layout.css @ 6c786cd
 * (motor mudou por último em 0ef4839). Ver ORIGEM.txt.
 *
 * O que muda em relação ao app:
 *  - fonte: Archivo (OFL, servida daqui) no lugar da Calibri. O preço usa a
 *    "Archivo Preco" — instância estática da Archivo variável em largura 72%
 *    e peso 900, com nome de família próprio: o canvas (medidaTinta) e o
 *    html2canvas montam a fonte SEM font-stretch, então a largura estreita
 *    tem que vir da família, não de uma propriedade CSS que eles ignoram;
 *  - o tema: no app a faixa do preço e o topo vêm da ARTE do tema (imagem).
 *    Aqui são camadas desenhadas (#tema-*) nas cores da marca;
 *  - fora: os selos de pagamento e a tarja do parcelado do app;
 *  - parcelado (30/09): #a-vista ("ou R$ X à vista") acima da assinatura,
 *    e as regras do app para o valor e o rótulo, copiadas sem alteração;
 *  - o arrasto da foto (--img-x/y) e do texto (--txt-x/y) é o do original;
 *  - #selo-overlay: selo próprio ("Oferta da semana", "Só no PIX"...) na
 *    cor de destaque, arrastável (--selo-x/y), liga/desliga no formulário;
 *  - #selo-demo: a assinatura no rodapé da faixa.
 * As medidas (595x841, tops, tamanhos) são as do cartaz A4 do app.
 * ========================================================================== */

@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo-100-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo-100-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo-100-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Archivo Preco';
    src: url('fonts/archivo-preco-72-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

#capture {
    position: relative;
    width: 595px;
    height: 841px;
    overflow: hidden;
    background: #ffffff;
    color: #111111;
    font-family: 'Archivo', sans-serif;
    /* O cartaz nunca herda o tamanho/entrelinha da página do site. */
    font-size: 16px;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
}
#capture * { box-sizing: content-box; }

/* ---- TEMA (no app: a imagem do tema) ---------------------------------- */
#tema-topo {
    position: absolute;
    left: 0;
    top: 0;
    width: 595px;
    height: 207px;               /* + 8px de fita = 215 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#tema-logo {
    display: block;
    max-width: 460px;
    max-height: 150px;           /* 207 - 150 = 57: respiro >= 20px em cima e embaixo */
    width: auto;
    height: auto;
}
#tema-logo[hidden], #tema-nome[hidden] { display: none; }
#tema-nome {
    box-sizing: border-box;
    width: 595px;
    padding: 0 30px;
    text-align: center;
    font-weight: 900;
    font-size: 46px;
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: break-word;
}
#tema-fita {
    position: absolute;
    left: 0;
    top: 207px;
    width: 595px;
    height: 8px;
}
#tema-faixa {
    position: absolute;
    left: 0;
    top: 653px;
    width: 595px;
    height: 188px;
}

/* ---- do layout.css do cartaz A4 --------------------------------------- */
#title-img {
    font-size: 30px;
    text-align: center;
    font-weight: 900;
    /* O título do cartaz sai sempre em caixa alta, como na arte da rede. */
    text-transform: uppercase;
    overflow-wrap: break-word;
}

#descr-img {
    text-align: center;
    font-size: 23px;
    font-weight: 400;
    overflow-wrap: break-word;
}

#description-product {
    width: 595px;
    /* Margem mínima nas laterais: sem ela o título encostava nas bordas. */
    box-sizing: border-box;
    padding: 0 30px;
    height: 40px;
    position: absolute;
    top: 560px;
    line-height: 30px;
    /* Titulo + descricao arrastam JUNTOS (o bloco inteiro), como a foto:
       --txt-x/--txt-y (LayoutEngine.moveis). Do layout.css do app. */
    transform: translate(var(--txt-x, 0px), var(--txt-y, 0px));
    z-index: 1;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
#description-product.is-dragging { cursor: grabbing; }

#price-desc {
    width: 120px;
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-top: 5px;
    text-align: center;
    position: absolute;
    top: 231px;
    left: 461px;
    border-radius: 50%;
    height: 120px;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
}

#desc {
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: -0.08em;
    margin-bottom: -2px;
}

#num-perc-desc {
    font-family: 'Archivo Preco', sans-serif;
    font-size: 56px;
    line-height: 1;
}

#percent {
    font-family: 'Archivo Preco', sans-serif;
    font-size: 34px;
    margin-left: 2px;
}

#center-desc {
    display: inline-flex;
    align-items: center;
}

#price-off {
    font-size: 40px;
    font-weight: 900;
    position: absolute;
    top: 560px;
    left: 20px;
    color: #111111;
}

#container-price {
    text-align: center;
    position: absolute;
    top: 525px;
    left: 0;
    width: 595px;
    height: 121px;
    color: #111111;
}

#price1 {
    font-family: 'Archivo Preco', sans-serif;
    font-size: 100px;
    font-weight: 900;
    position: relative;
    top: 0;
    padding-left: 10px;
    margin: 0 auto;
    width: 585px;                /* 595 - padding: a caixa não passa do cartaz */
}

/* A tarja que risca o preço "DE": largura e posição pelo ajustarTachado. */
#tachado {
    height: 5px;
    width: 472px;
    left: 70px;
    top: 577px;
    position: absolute;
    background: #171214;
}

#price-on {
    font-size: 30px;
    font-weight: 900;
    position: absolute;
    top: 7px;
    left: 20px;
    line-height: 30px;
}

#price2 {
    font-family: 'Archivo Preco', sans-serif;
    font-size: 145px;
    font-weight: 900;
    text-align: center;
    /* A posição é do ajustarFontePreco (top inline, pela tinta). */
    margin-top: 0;
    white-space: nowrap;
}

#img-center {
    position: absolute;
    top: 233px;
    left: 0;
    width: 595px;
    height: 315px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#img-product {
    max-width: 355px;
    max-height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* Drag via CSS variables (do layout.css do app) */
    transform: translate(var(--img-x, 0px), var(--img-y, 0px)) scale(var(--img-scale, 1));
    transform-origin: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
#img-product.is-dragging { cursor: grabbing; }
/* Sem foto (o GIF 1x1 do lugar) não há o que arrastar. */
#capture:not(.tem-foto) #img-product { pointer-events: none; }

/* ---- selo (próprio do site) -------------------------------------------- */
/* Arrastável como os selos do app: o id termina em -overlay (a captura copia
   a posição de todo overlay) e a posição vem de --selo-x/--selo-y. */
#selo-overlay {
    position: absolute;
    left: 22px;
    top: 238px;
    z-index: 2;
    box-sizing: border-box;
    max-width: 230px;
    padding: 11px 18px 10px;
    border-radius: 14px;
    font-weight: 900;
    font-size: 25px;
    line-height: 1.05;
    text-transform: uppercase;
    text-align: center;
    overflow-wrap: break-word;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
    transform: translate(var(--selo-x, 0px), var(--selo-y, 0px)) rotate(-4deg);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
#selo-overlay[hidden] { display: none; }
#selo-overlay.is-dragging { cursor: grabbing; }

#img-bottom {
    position: absolute;
    height: 188px;
    width: 595px;
    top: 653px;
    left: 0;
    font-weight: 900;
}

#und {
    position: absolute;
    left: 506px;
    top: 135px;
    font-weight: 700;
    font-size: 30px;
    line-height: 30px;
}

/* Assinatura no rodapé da faixa. É o "piso" do preço no ajustarFontePreco
   (entra como aVista): o número nunca desce até ela. */
#selo-demo {
    position: absolute;
    left: 110px;
    width: 375px;               /* não chega no "cada" (506) */
    bottom: 7px;
    text-align: center;
    font-size: 11px;
    line-height: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

/* ===== PARCELADO (do layout.css do app) ===============================
   "ou R$ X à vista" embaixo da parcela. No app ele fica colado no pé da
   faixa (bottom 10px); aqui o pé é da assinatura (#selo-demo), então sobe
   para cima dela. É o piso do preço no ajustarFontePreco quando há parcelas. */
#a-vista {
    display: none;
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 24px;
    text-align: center;
    font-size: 27px;
    line-height: 36px;
    font-weight: 400;
    white-space: nowrap;
}
/* O valor do "à vista" é maior que as palavras em volta, como na arte da rede
   (ver a medição no layout.js). 27px/33px deixa a proporção entre as duas
   referências: os dígitos ficam com ~1,66x a altura do "ou". */
#a-vista .a-vista-valor {
    font-size: 33px;
}

/* O rótulo do parcelado é menor que o do cartaz à vista: "POR 12x / DE R$" é
   mais largo que "POR / R$", e como o número é centralizado na faixa, cada px
   de rótulo custa DOIS px de número. 26px devolve espaço sem perder leitura.
   Só no parcelado — no cartaz à vista o rótulo fica como sempre foi. */
#img-bottom.parcelado #price-on {
    font-size: 26px;
    line-height: 27px;
}

/* A CAPTURA depende disto. O html2canvas acha a linha de base de cada fonte
   pondo uma <img> 1x1 com vertical-align: baseline ao lado de um <span>, num
   <div> solto no fim do <body> do clone. O reset do site (globals.css:
   img { display: block }) derruba a imagem para a linha de baixo, e a linha
   de base "medida" passava da altura inteira da linha: todo texto do cartaz
   baixado saía 20 a 60px abaixo do da tela (proporcional à fonte). Aqui a
   imagem de medição volta a ser inline — só ela: <img> filha direta de um
   <div> sem id nem classe, filho direto do <body>. */
body > div:not([id]):not([class]) > img {
    display: inline;
    max-width: none;
    height: auto;
}