/* =========================================================
   Cestas e Presentes de Natal 2026 — Jacomar
   Layout fiel ao artboard de 1920 px do Illustrator. O conteúdo
   ocupa a coluna central de 1220 unidades (x 350–1570 no .ai):
   --u = 1/1220 da largura da coluna, então tudo escala junto.
   Abaixo de 768 px o layout deixa de ser absoluto e vira coluna.
   ========================================================= */

:root {
  --vermelho-fundo: #8c0f0d;
  --dourado: #ebc26e;
  --dourado-texto: #e8ab36;
  --verde-faixa: #38b54a;
  --verde-botao: #00913b;
  --exo: "Exo", sans-serif;
  --exo2: "Exo 2", sans-serif;
  --karantina: "Karantina", "Exo 2", sans-serif;
  /* baseline com line-height:1 = (1 + ascent - descent) / 2 de cada fonte */
  --bl-exo: 0.835;
  --bl-exo2: 0.9;
  --bl-kar: 0.855;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--exo2);
  color: #fff;
  /* papel vermelho em relevo: uma repetição vertical de 739 px do .ai */
  background: var(--vermelho-fundo) url('../assets/img/fundo.jpg') center top / 1920px auto repeat;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
h1, h2, p, ul { margin: 0; }

/* ---------- Coluna central escalável ---------- */
.palco {
  --u: calc(100cqw / 1220);
  position: relative;
  width: min(1220px, 100% - 32px);
  margin-inline: auto;
  container-type: inline-size;
}

/* Caixa absoluta em coordenadas do card (x - 350, y - topo do card) */
.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));
}
/* Texto de uma linha posicionado pela baseline (--b) */
.t {
  --bl: var(--bl-exo2);
  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;
}
/* Bloco de várias linhas centrado em --cx, primeira baseline em --b */
.hero__texto, .rodape__texto, .rodape__nota, .rodape__url {
  --bl: var(--bl-exo2);
  --lh: 1.07;
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: calc((var(--b) - var(--fs) * ((var(--lh) - 1) / 2 + var(--bl))) * var(--u));
  transform: translateX(-50%);
  font-size: calc(var(--fs) * var(--u));
  line-height: var(--lh);
  text-align: center;
  white-space: nowrap;
}

/* ---------- Topo ---------- */
.hero {
  position: relative;
  height: calc(867 * var(--u));
}
.hero__enfeite, .hero__titulo img {
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(60, 0, 0, 0.45));
}
.hero__texto {
  --lh: 1.06;
  font-weight: 600;
  color: var(--dourado-texto);
  font-size: max(11px, calc(var(--fs) * var(--u)));
}
/* "Tradição em celebrar o Natal do" + "seu jeito." (Brushline, imagem): uma linha só,
   centrada; a imagem desce 30.4 unidades abaixo da baseline, como no .ai.
   --y é o topo da imagem, que é o ponto mais alto da linha. */
.hero__slogan {
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: calc(var(--y) * var(--u));
  transform: translateX(-50%);
  font-size: calc(var(--fs) * var(--u));
  font-weight: 500;
  line-height: 1;
  color: #e3ba54;
  white-space: nowrap;
}
.hero__slogan img {
  display: inline-block;
  width: calc(182 * var(--u));
  height: auto;
  /* a imagem tem 10 de margem transparente antes do "s": no .ai o "seu" fica a um espaço do "do" */
  margin-left: calc(-10 * var(--u));
  vertical-align: calc(-30.4 * var(--u));
}
/* Pílula verde: gradiente e sombra medidos no .ai */
.hero__cta {
  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));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.06em; /* centro óptico das maiúsculas da Exo 2 */
  border-radius: 999px;
  background: linear-gradient(#2aad4e 0%, #0b9a45 30%, #028d42 62%, #037a46 100%);
  box-shadow:
    inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.28),
    inset 0 calc(-2 * var(--u)) 0 rgba(0, 60, 25, 0.25),
    0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(70, 0, 0, 0.45);
  /* 40.64 no .ai, mas a Exo 2 do Google Fonts é ~8% mais larga que a do Illustrator:
     37.5 mantém o texto com os mesmos 550 de largura do .ai */
  font-size: calc(37.5 * var(--u));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 50, 15, 0.45);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.hero__cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.hero__cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 99px; }

/* ---------- Cards ----------
   No .ai cada card fica POR CIMA do seguinte (cantos arredondados de baixo
   sobre a cor do próximo). O fundo é um ::before com z-index negativo
   decrescente (--z), então todo o conteúdo fica acima de todos os fundos. */
.card {
  position: relative;
  height: calc(var(--h) * var(--u));
  margin-top: calc(var(--sobe, 0) * var(--u) * -1);
  --raio: calc(40 * var(--u));
}
.card::before {
  content: '';
  position: absolute;
  z-index: var(--z);
  inset: 0;
  border-radius: var(--raio);
  background: var(--cor);
  pointer-events: none;
}
.card--branco     { --cor: #fff; }
.card--delicias   { --cor: #52b04f; }
.card--jacob      { --cor: radial-gradient(ellipse 34% 26% at 46% 68%, #0a5c37, transparent), radial-gradient(ellipse 30% 13% at 50% 0, #036a3c, transparent), #037d47; }
.card--paz        { --cor: #d94a78; }
.card--acao       { --cor: #ebc26e; }
.card--luzes      { --cor: #062f4f; }
.card--noite      { --cor: #e31233; }
.card--panettones { --cor: radial-gradient(ellipse 45% 42% at 50% 58%, #1aa05a, transparent), #037d47; margin-bottom: calc(26 * var(--u)); }

.pendente { z-index: 1; }
/* Molduras douradas (cantos + linha central) e divisor: imagens tiradas do .ai */
.moldura, .divisor, .hero__moldura { pointer-events: none; }
.moldura--dir { display: none; }

/* ---------- Preço (camadas deslocadas do .ai viram text-shadow) ---------- */
.preco .t { transform: scaleX(var(--sx)); transform-origin: 0 0; }
.preco--exo .t, .itens--exo .t { --bl: var(--bl-exo); font-family: var(--exo); }
.preco__rs { --bl: var(--bl-exo); font-family: var(--exo); font-weight: 400; }
.preco__int {
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow:
    calc(var(--sh1x) * var(--u)) calc(var(--sh1y) * var(--u)) 0 var(--sh1c),
    calc(var(--sh2x) * var(--u)) calc(var(--sh2y) * var(--u)) 0 var(--sh2c);
}
/* Centavos dentro do número: andam junto com ele; --vao reproduz o espaço do .ai */
.preco__cent {
  display: inline-block;
  margin-left: calc(var(--vao) * var(--u));
  font-size: calc(var(--fsr) * 1em);
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: calc(var(--sobe) / var(--fsr) * 1em);
  text-shadow: none;
}
.cesta--delicias .preco__rs { --bl: var(--bl-exo2); font-family: var(--exo2); font-weight: 700; }
.cesta--delicias .preco__cent { font-weight: 900; }

.itens .t { transform: scaleX(var(--sx)); transform-origin: 0 0; }
.itens__n { font-weight: 900; }
.itens__l { --bl: var(--bl-exo); font-family: var(--exo); font-weight: 500; text-transform: uppercase; }
.cesta--delicias .itens__l { --bl: var(--bl-exo2); font-family: var(--exo2); }

.sem-alcool .t {
  --bl: var(--bl-kar);
  font-family: var(--karantina);
  font-weight: 400;
  text-transform: uppercase;
}

/* ---------- Lista de produtos ---------- */
.lista {
  --fs: 14;
  --lh: 1.5714; /* 22 pt entre linhas */
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: calc((var(--b) - var(--fs) * ((var(--lh) - 1) / 2 + var(--bl-exo2))) * var(--u));
  transform: translateX(-50%);
  padding: 0;
  list-style: none;
  font-size: max(12px, calc(var(--fs) * var(--u)));
  font-weight: 600;
  line-height: var(--lh);
  text-align: center;
  white-space: nowrap;
}
.lista li { display: inline; }
.lista li:not(.fim)::after { content: "  |  "; white-space: pre; }
.lista li.fim::after { content: "\A"; white-space: pre; }

/* ---------- Orçamento ---------- */
.orcamento { background: var(--verde-faixa); }
.orcamento__titulo {
  padding-top: calc(26 * var(--u));
  font-size: calc(96 * var(--u));
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.form {
  display: grid;
  grid-template-columns: calc(400 * var(--u)) calc(633 * var(--u));
  column-gap: calc(20 * var(--u));
  row-gap: calc(26 * var(--u));
  align-items: center;
  margin-top: calc(47 * var(--u));
  padding-bottom: calc(62 * var(--u));
}
.form label {
  justify-self: end;
  font-size: calc(33 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}
.form input, .form select {
  width: calc(466 * var(--u));
  height: calc(46 * var(--u));
  min-height: 34px;
  padding: 0 calc(14 * var(--u));
  border: 2px solid transparent;
  border-radius: calc(6 * var(--u));
  background: #fff;
  color: #1d3b22;
  font: 500 max(16px, calc(22 * var(--u))) var(--exo2);
  outline: none;
}
.form .form__largo { width: 100%; }
.form select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2300913b' stroke-width='2.4'/%3E%3C/svg%3E") right calc(14 * var(--u)) center no-repeat; cursor: pointer; }
.form input:focus, .form select:focus { border-color: #0b6b2a; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); }
.form input[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: #b3121f; }
.form__erro, .form__ok {
  grid-column: 2;
  font-size: max(14px, calc(20 * var(--u)));
  font-weight: 600;
  color: #fff6a8;
}
.form__ok { color: #fff; }
/* campo-isca anti-robô: fora da tela, ninguém vê nem tabula até ele */
.form__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__enviar {
  grid-column: 2;
  width: calc(289 * var(--u));
  height: calc(52 * var(--u));
  min-height: 40px;
  margin-top: calc(7 * var(--u));
  border: 0;
  border-radius: 99px;
  background: linear-gradient(#05a646, var(--verde-botao) 60%, #017a31);
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 60, 20, 0.35);
  color: #fff;
  font: 600 calc(35.68 * var(--u)) var(--exo2);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.form__enviar:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.form__enviar:disabled { cursor: default; opacity: 0.8; }
.form__enviar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Rodapé ---------- */
/* o .palco não pode usar o próprio --u (cqw resolve no container de cima) */
/* semitransparente como no .ai: o relevo de flocos do fundo aparece por baixo (dá ~#590101) */
.card--rodape { margin-bottom: calc(157 * var(--u)); --cor: rgba(40, 0, 0, 0.52); --raio: 0 0 calc(40 * var(--u)) calc(40 * var(--u)); }
.rodape__texto { --lh: 1.073; font-weight: 600; color: var(--dourado-texto); }
.rodape__nota { --lh: 1.048; font-weight: 600; color: #ffd673; font-size: max(10px, calc(var(--fs) * var(--u))); }
.rodape__url { --lh: 1; font-weight: 300; font-style: italic; color: var(--dourado); }
.rodape__url b { font-weight: 700; }
.rodape__url img {
  display: inline-block;
  width: calc(62 * var(--u));
  height: auto;
  margin: 0 calc(4 * var(--u));
  vertical-align: middle;
}
.rodape__url a:hover b, .contato a:hover { text-decoration: underline; }

.contato { color: var(--dourado); font-style: italic; }
.contato__email {
  --lh: 1.11;
  position: absolute;
  right: calc((1220 - var(--rx)) * var(--u));
  top: calc((var(--b) - var(--fs) * ((var(--lh) - 1) / 2 + var(--bl-exo2))) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  line-height: var(--lh);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}
.contato__email b { font-weight: 800; }
.contato__whats {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(763 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(var(--fs) * var(--u));
  font-weight: 800;
  white-space: nowrap;
}
.contato__whats img { width: calc(68 * var(--u)); height: auto; }
.contato__whats span { padding-top: calc(12 * var(--u)); }
.contato__whats small { font-size: 0.76em; }
.contato__validade {
  --lh: 1.12;
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--b) - var(--fs) * ((var(--lh) - 1) / 2 + var(--bl-exo2))) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  font-weight: 200;
  line-height: var(--lh);
  white-space: nowrap;
}

/* =========================================================
   Celular: sai o posicionamento absoluto, tudo vira uma coluna.
   --u passa a ser 1/1000 da coluna (imagens maiores na tela).
   ========================================================= */
@media (max-width: 767px) {
  .palco { --u: calc(100cqw / 1000); width: calc(100% - 24px); }
  .abs, .t, .hero__texto, .rodape__texto, .rodape__nota, .rodape__url,
  .lista, .contato__email, .contato__validade, .contato__whats, .hero__cta {
    position: static;
    transform: none;
  }
  .abs { width: min(100%, calc(var(--w) * var(--u))); height: auto; margin-inline: auto; }

  /* Topo */
  .hero { height: auto; padding: 4px 0 12px; display: flex; flex-direction: column; align-items: center; }
  .hero__enfeite { position: absolute; top: -8px; width: 24%; }
  .hero__enfeite--3x { left: -6px; }
  .hero__enfeite--6x { right: -6px; left: auto; }
  .hero__titulo { width: 60%; }
  .hero__titulo img { width: 100%; }
  .hero__slogan { order: 1; position: static; transform: none; margin: 10px 0 4px; font-size: 17px; white-space: normal; text-align: center; }
  .hero__slogan img { width: 84px; margin-left: -5px; vertical-align: -14px; }
  .hero__bloco { order: 2; position: relative; width: 100%; margin-top: 18px; }
  .hero__bloco--personalizar { order: 3; }
  .hero__bloco img { width: min(62%, 300px); }
  /* no .ai o texto fica dentro da moldura da imagem, entre o título e a linha de baixo */
  .hero__texto { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); font-size: clamp(11px, 3.3vw, 15px); }
  .hero__bloco--personalizar .hero__texto { top: 74%; }
  .hero__cta { order: 4; position: relative; inset: auto; width: 92%; height: 48px; margin: 22px 0 -10px; font-size: clamp(15px, 4.6vw, 20px); }

  /* Cards */
  .card { height: auto; padding: 46px 12px 34px; margin-top: -26px; --raio: 24px; }
  .card:first-of-type, .card--rodape { margin-top: 0; }
  .card--branco { padding-top: 26px; padding-bottom: 20px; }
  .card--branco .cesta { position: relative; padding: 20px 0 30px; }
  /* molduras: encolhida na largura do celular a linha some, então mostramos só os
     cantos em ~60% do tamanho do .ai — a mesma imagem duas vezes, recortada com
     object-fit (uma cópia no canto esquerdo, outra no direito) */
  .moldura {
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(50% - 8px);
    height: 124px;
    margin: 0;
    object-fit: cover;
    object-position: left top;
  }
  .moldura--dir { display: block; left: auto; right: 8px; object-position: right top; }
  .moldura--base { top: auto; bottom: 8px; object-position: left bottom; }
  .moldura--base.moldura--dir { object-position: right bottom; }
  .card--branco .moldura { top: 0; left: -4px; }
  .card--branco .moldura--dir { left: auto; right: -4px; }
  .card--branco .moldura--base { top: auto; bottom: 0; }
  .card--rodape .moldura { height: 143px; }
  .hero__moldura { display: none; }
  .pendente { position: absolute; top: -18px; left: 14%; width: 44px; height: auto; margin: 0; }
  .pendente--dir { left: auto; right: 14%; }
  .card--panettones .pendente { width: 60px; }
  .cesta { display: flex; flex-direction: column; align-items: center; }
  .cesta + .divisor { position: relative; left: auto; top: auto; width: 80%; height: auto; margin: 14px auto; }
  .cesta__titulo { width: 100%; }
  .cesta__titulo img { width: 96%; }
  .cesta__produtos { width: 100%; margin-top: -2%; }
  .preco { display: flex; align-items: flex-start; justify-content: center; margin-top: -4px; }
  .preco .t { font-size: calc(var(--fs) * var(--u) * 1.15); }
  .preco__rs { margin-top: 0.35em; margin-right: 2px; }
  .itens { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
  .itens .t { font-size: calc(var(--fs) * var(--u)); }
  .itens .itens__l { font-size: max(12px, calc(var(--fs) * var(--u))); }
  .itens__n { line-height: 0.85; }
  .sem-alcool .t { font-size: 34px; margin-top: 6px; }
  .cesta--paz .itens { order: 3; }
  .selo { width: 30%; margin: -16% 2% 0 auto; }
  .lista { margin-top: 10px; font-size: 13.5px; line-height: 1.55; white-space: normal; text-wrap: balance; }
  /* no celular cada produto vira um bloco inteiro, marcado com um ponto */
  .lista li { display: inline-block; margin: 0 5px; }
  .lista li::after { content: none !important; }
  .lista li::before { content: "•"; margin-right: 5px; opacity: 0.6; }
  .lista--coluna li { display: block; }
  .lista--coluna li::before { content: none; }
  .divisor { display: none; }
  .cesta + .divisor { display: block; }

  /* Orçamento */
  .orcamento { margin-top: 0; padding: 26px 0 34px; }
  .orcamento__titulo { padding: 0; font-size: clamp(28px, 9vw, 40px); }
  .form { grid-template-columns: 1fr; row-gap: 6px; margin-top: 18px; padding-bottom: 0; }
  .form label { justify-self: start; font-size: 16px; margin-top: 8px; }
  .form input, .form select { width: 100%; height: 44px; padding: 0 12px; border-radius: 6px; }
  .form select { background-position: right 12px center; }
  .form__erro, .form__ok, .form__enviar { grid-column: 1; }
  .form__enviar { justify-self: center; width: 70%; height: 48px; margin-top: 18px; font-size: 22px; }

  /* Rodapé */
  .rodape .palco { padding-bottom: 28px; }
  .card--rodape { margin-bottom: 0; padding: 30px 14px 70px; display: flex; flex-direction: column; align-items: center; text-align: center; --raio: 0 0 24px 24px; }
  .rodape__pilha { display: none; }
  .rodape__titulo img { width: 80%; }
  .rodape__titulo--empresas { margin-top: 26px; }
  .rodape__texto { font-size: 16px; white-space: normal; margin-top: 6px; }
  .rodape__nota { font-size: 11px; white-space: normal; margin-top: 8px; }
  .rodape__url { font-size: 16px; margin-top: 26px; white-space: normal; }
  .rodape__url img { width: 26px; margin: 0 4px; }
  .contato { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; }
  .contato__email, .contato__validade { font-size: 14px; text-align: center; white-space: normal; }
  .contato__whats { font-size: 24px; gap: 6px; }
  .contato__whats img { width: 40px; }
  .contato__whats span { padding-top: 6px; }
  .rodape__logo { position: relative; inset: auto; width: 62%; margin: -46px auto 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__cta, .form__enviar { transition: none; }
}