/* Doce Magia Sabores — BIO PRIME (Premium)
   A bandeja da Greice: o biscoito canelado com a foto, o biscoito oval com o nome
   carimbado e a vitrine em três fornadas. A ousadia fica toda na abertura (o carimbo). */

:root {
  /* Cor — a lavanda do "SABORES" da logo, a massa do biscoito, o rosa das sacolas */
  --acucar: #F8F5FC;           /* fundo: açúcar de confeiteiro com lavanda */
  --papel: #FFFFFF;            /* superfícies de leitura */
  --massa: #F0DCC0;            /* biscoito cru: a placa do nome e os biscoitos */
  --massa-clara: #FBF1E3;      /* cena da encomenda */
  --massa-borda: #E2C397;      /* a borda que doura no forno */
  --tostado: #8A5528;          /* letra carimbada (4,6:1 na massa) */
  --tinta: #3A3456;            /* texto (10,8:1 no açúcar) */
  --tinta-soft: #5E5880;       /* apoio (6,1:1 no açúcar, 4,9:1 na massa) */
  --lavanda: #E4DFF0;          /* contorno de superfície */
  --lavanda-forte: #8C86B0;    /* contorno de controle (3,2:1) */
  --lavanda-clara: #EEEAF7;    /* cena final */
  --rosa: #C2386C;             /* só ação e foco (texto branco 5,1:1) */
  --rosa-press: #A52C5A;
  --dourado: #B98A3E;          /* só fio decorativo: o dourado da cursiva da logo */

  /* Tipografia — glacê para o nome, uma humanista para ler */
  --display: "Agbalumo", "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espaço e forma (raio por papel) */
  --gutter: 20px;
  --scene: 56px;
  --r-acao: 16px;
  --r-foto: 18px;
  --r-chip: 999px;
  --r-campo: 12px;

  /* Motion */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 450ms;
  --motion-carimbo: 1250ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-desce: cubic-bezier(0.5, 0, 0.9, 0.6);    /* o carimbo ganha peso ao descer */
  --ease-sobe: cubic-bezier(0.2, 0.7, 0.3, 1);     /* e sai leve da massa */
  --shift-cta: 14px;
  --press-scale: 0.97;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* O cortador canelado da Greice (24 ondas) */
  --cortador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5.8A6.3 6.3 0 0 1 61.44 7.31A6.3 6.3 0 0 1 72.1 11.72A6.3 6.3 0 0 1 81.25 18.75A6.3 6.3 0 0 1 88.28 27.9A6.3 6.3 0 0 1 92.69 38.56A6.3 6.3 0 0 1 94.2 50A6.3 6.3 0 0 1 92.69 61.44A6.3 6.3 0 0 1 88.28 72.1A6.3 6.3 0 0 1 81.25 81.25A6.3 6.3 0 0 1 72.1 88.28A6.3 6.3 0 0 1 61.44 92.69A6.3 6.3 0 0 1 50 94.2A6.3 6.3 0 0 1 38.56 92.69A6.3 6.3 0 0 1 27.9 88.28A6.3 6.3 0 0 1 18.75 81.25A6.3 6.3 0 0 1 11.72 72.1A6.3 6.3 0 0 1 7.31 61.44A6.3 6.3 0 0 1 5.8 50A6.3 6.3 0 0 1 7.31 38.56A6.3 6.3 0 0 1 11.72 27.9A6.3 6.3 0 0 1 18.75 18.75A6.3 6.3 0 0 1 27.9 11.72A6.3 6.3 0 0 1 38.56 7.31A6.3 6.3 0 0 1 50 5.8Z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-cta: 0px;
    --press-scale: 1;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--acucar);
  color: var(--tinta);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--tinta);
  color: var(--acucar);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: calc(12px + var(--safe-top)); }

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.titulo {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(29px, 8vw, 34px);
  line-height: 1.12;
  color: var(--tinta);
  text-wrap: balance;
}

/* ---------- Cena 1: a bandeja ---------- */

.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hero {
  padding: calc(18px + var(--safe-top)) 0 8px;
}

.hero__bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--papel);
  box-shadow: 0 0 0 1px var(--lavanda);
}

.hero__ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 4px;
  font-weight: 500;
  color: var(--tinta-soft);
  text-decoration: none;
}
.hero__ig i { font-size: 18px; }

.bandeja {
  display: grid;
  justify-items: center;
  margin: 14px 0 22px;
}

/* o biscoito canelado: a foto vai por cima como papel de arroz */
.canelado {
  display: grid;
  place-items: center;
  width: min(76vw, 330px);
  aspect-ratio: 1;
  filter: drop-shadow(0 14px 18px rgba(58, 52, 86, 0.18));
}
.canelado::before,
.canelado img { grid-area: 1 / 1; }
.canelado::before {
  content: "";
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 46%, #F4E4CD 0 58%, var(--massa) 70%, var(--massa-borda) 100%);
  -webkit-mask: var(--cortador) center / 100% 100% no-repeat;
  mask: var(--cortador) center / 100% 100% no-repeat;
}
.canelado img {
  position: relative;   /* a máscara do ::before cria camada própria; a foto fica por cima */
  z-index: 1;
  width: 80%;
  height: 80%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* o biscoito oval com o nome carimbado */
.massa {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(86vw, 360px);
  min-height: 116px;
  margin-top: -54px;
  padding: 16px 22px 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #F6E7D2 0 42%, var(--massa) 66%, var(--massa-borda) 100%);
  box-shadow:
    inset 0 -5px 10px rgba(138, 85, 40, 0.16),
    inset 0 3px 6px rgba(255, 255, 255, 0.6),
    0 14px 22px -14px rgba(58, 52, 86, 0.5);
  rotate: -1.5deg;
  -webkit-tap-highlight-color: transparent;
}
.massa > * { grid-area: 1 / 1; }

.nome {
  margin: 0;
  display: grid;
  justify-items: center;
  font-weight: 400;
  line-height: 1;
}
.nome__txt {
  font-family: var(--display);
  font-size: clamp(38px, 11vw, 46px);
  line-height: 1.05;
  color: var(--tostado);
  /* a letra afunda na massa: luz embaixo, sombra em cima */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 -1px 1px rgba(90, 50, 20, 0.35);
}
.nome__sub {
  margin-top: 4px;
  font-family: var(--text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* centra a caixa alta espaçada da logo */
  text-transform: uppercase;
  color: var(--tinta-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.hero__lead {
  max-width: 34ch;
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--tinta);
}

.ancora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-weight: 700;
  color: var(--tinta-soft);
  text-decoration: underline;
  text-decoration-color: var(--lavanda-forte);
  text-underline-offset: 5px;
}
.ancora i { font-size: 14px; }

/* ---------- O carimbo (abertura) ---------- */

.carimbo {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.carimbo__sombra,
.carimbo__disco {
  position: absolute;
  inset: -6px -10px;
  border-radius: 50%;
}

.carimbo__sombra {
  background: radial-gradient(ellipse at 50% 50%, rgba(58, 52, 86, 0.32) 0 52%, rgba(58, 52, 86, 0) 72%);
}

/* acrílico: dá para ver a massa e o relevo das letras através dele */
.carimbo__disco {
  display: grid;
  place-items: center;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.62) 0 18%, rgba(255, 255, 255, 0.16) 38%, rgba(228, 223, 240, 0.34) 62%, rgba(255, 255, 255, 0.5) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(185, 138, 62, 0.7),
    inset 0 0 0 7px rgba(255, 255, 255, 0.3),
    0 2px 0 rgba(255, 255, 255, 0.4);
}

.carimbo__relevo {
  display: grid;
  justify-items: center;
  line-height: 1;
}
.carimbo__relevo .nome__txt {
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 1px rgba(58, 52, 86, 0.28);
}
.carimbo__relevo .nome__sub {
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 1px rgba(58, 52, 86, 0.24);
}

.carimbo__pega {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.95) 0 16%, rgba(238, 234, 247, 0.62) 46%, rgba(185, 138, 62, 0.36) 100%);
  box-shadow: 0 3px 6px rgba(58, 52, 86, 0.2);
}

/* estados: o nome só fica escondido com JS e nunca passa de 2,6s escondido
   (:where mantém a especificidade baixa para os estados abaixo vencerem) */
.js :where(.hero:not(.pronto)) .massa > .nome {
  opacity: 0;
  animation: revela-seguro 0s linear 2.6s forwards;
}

.hero.abertura .carimbo { display: block; }
.hero.abertura .carimbo__disco {
  animation: carimbo-disco var(--motion-carimbo) linear both;
}
.hero.abertura .carimbo__sombra {
  animation: carimbo-sombra var(--motion-carimbo) linear both;
}
.hero.abertura .massa {
  animation: massa-cede var(--motion-carimbo) linear both;
}
.hero.abertura .massa > .nome {
  animation: nome-imprime var(--motion-carimbo) linear both;
}

.hero.sem-abertura .massa > .nome {
  animation: nome-chega var(--motion-standard) var(--ease-enter) both;
}

.hero.pronto .massa > .nome {
  opacity: 1;
  transition: opacity 200ms var(--ease-standard);
}

/* eco: um toque no biscoito aperta a massa de novo */
.massa.is-aperta { animation: massa-aperta 280ms var(--ease-standard); }

@keyframes carimbo-disco {
  0%   { transform: translate(16px, -44px) scale(1.42); opacity: 0; animation-timing-function: var(--ease-desce); }
  16%  { opacity: 1; }
  42%  { transform: translate(0, 0) scale(1.02); animation-timing-function: var(--ease-standard); }
  48%  { transform: translate(0, 0) scale(0.985); }
  60%  { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: var(--ease-sobe); }
  100% { transform: translate(24px, -62px) scale(1.36); opacity: 0; }
}

@keyframes carimbo-sombra {
  0%   { transform: translate(34px, 24px) scale(1.24); opacity: 0; animation-timing-function: var(--ease-desce); }
  42%  { transform: translate(4px, 6px) scale(1); opacity: 0.85; animation-timing-function: var(--ease-standard); }
  48%  { transform: translate(2px, 3px) scale(0.98); opacity: 1; }
  60%  { transform: translate(2px, 3px) scale(0.98); opacity: 1; animation-timing-function: var(--ease-sobe); }
  100% { transform: translate(40px, 30px) scale(1.3); opacity: 0; }
}

@keyframes massa-cede {
  0%, 44% { scale: 1; }
  49%     { scale: 1.012 0.972; }
  58%     { scale: 0.996 1.006; }
  66%, 100% { scale: 1; }
}

@keyframes nome-imprime {
  0%, 45% { opacity: 0; transform: scale(1.03); }
  50%     { opacity: 0.8; transform: scale(1.01); }
  64%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes massa-aperta {
  0%   { scale: 1; }
  40%  { scale: 1.01 0.975; }
  100% { scale: 1; }
}

@keyframes nome-chega { from { opacity: 0; } to { opacity: 1; } }
@keyframes revela-seguro { to { opacity: 1; } }

/* ---------- Cena 2: os caminhos ---------- */

.links { margin: 26px 0 var(--scene); }

.links__lista {
  display: grid;
  gap: 10px;
}

.link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 10px 16px 10px 12px;
  border: 1.5px solid var(--lavanda);
  border-radius: var(--r-acao);
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.link:active {
  transform: scale(var(--press-scale));
  background: var(--lavanda-clara);
}

.link__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--massa);
  color: var(--tostado);
  font-size: 19px;
}

.link__txt {
  display: grid;
  line-height: 1.25;
}
.link__txt strong { font-size: 18px; font-weight: 700; }
.link__txt small { font-size: 15px; color: var(--tinta-soft); }

.link--principal {
  border-color: var(--rosa);
  background: var(--rosa);
  color: #FFFFFF;
}
.link--principal .link__icone {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-size: 22px;
}
.link--principal .link__txt small { color: rgba(255, 255, 255, 0.92); }
.link--principal:active { background: var(--rosa-press); border-color: var(--rosa-press); }
.link--principal:focus-visible { outline-color: var(--tinta); }

@media (hover: hover) and (pointer: fine) {
  .link:hover { border-color: var(--lavanda-forte); }
  .link--principal:hover { background: var(--rosa-press); border-color: var(--rosa-press); }
}

/* ---------- Cena 3: da cozinha ---------- */

.cozinha { margin-bottom: var(--scene); }
.cozinha__lead { color: var(--tinta-soft); margin-bottom: 26px; }

.colecao + .colecao {
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1.5px solid var(--lavanda);
}

.colecao__titulo {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}
.colecao > p { color: var(--tinta-soft); }

.colecao figcaption {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--tinta-soft);
}

.colecao img { border-radius: var(--r-foto); background: var(--massa); }

/* 3a: a fornada que corre de lado */
.fornada {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68%;
  gap: 12px;
  margin: 16px calc(-1 * var(--gutter)) 10px;
  padding: 0 var(--gutter) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--lavanda-forte) transparent;
}
.fornada > li { scroll-snap-align: start; }
.fornada img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* 3b: a foto alta e os destaques ao lado */
.festa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 14px;
  align-items: start;
  margin: 16px 0 10px;
}
.festa__foto img { width: 100%; aspect-ratio: 361 / 505; object-fit: cover; }

.festa__destaques {
  display: grid;
  gap: 12px;
}

.destaque {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 0;
  text-decoration: none;
  color: var(--tinta);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.destaque img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--acucar), 0 0 0 3.5px var(--dourado);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.destaque span {
  text-decoration: underline;
  text-decoration-color: var(--lavanda-forte);
  text-underline-offset: 3px;
}
.destaque:active img { transform: scale(0.94); }

/* 3c: um grande e dois pequenos */
.trio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin: 16px 0 14px;
}
.trio__grande { grid-column: 1 / -1; }
.trio img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.colecao__nota {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--lavanda-clara);
  font-size: 16px;
  color: var(--tinta);
}
.colecao__nota i { color: var(--tinta-soft); }

/* link de ação contextual (fora da Hero) */
.link-acao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 4px;
  font-weight: 700;
  font-size: 18px;
  color: var(--rosa);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.link-acao span {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.link-acao i { font-size: 20px; }
.link-acao:active { transform: scale(var(--press-scale)); }
.link-acao--tinta { color: var(--tinta); }
.link-acao--tinta span { text-decoration-color: var(--lavanda-forte); }

/* ---------- Cena 4: monte a sua encomenda ---------- */

.encomenda {
  margin: 0 calc(-1 * var(--gutter)) var(--scene);
  padding: 44px var(--gutter) 40px;
  background: var(--massa-clara);
  border-radius: 28px;
}
.encomenda > p { color: var(--tinta); }

.pedido { margin-top: 20px; }

.escolha {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.escolha legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
  font-size: 17px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--lavanda-forte);
  border-radius: var(--r-chip);
  background: var(--papel);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.chip:active span { transform: scale(var(--press-scale)); }
.chip input:checked + span {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--acucar);
}
.chip input:focus-visible + span {
  outline: 3px solid var(--rosa);
  outline-offset: 3px;
}

.campos {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.campo { display: grid; gap: 6px; }
.campo__rotulo { font-weight: 700; font-size: 16px; }
.campo__rotulo small { font-weight: 400; color: var(--tinta-soft); font-size: 15px; }
.campo input {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1.5px solid var(--lavanda-forte);
  border-radius: var(--r-campo);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 17px;
}
.campo input::placeholder { color: #77729A; }
.campo input:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 1px;
  border-color: var(--tinta);
}

/* o bilhete: a mensagem como vai chegar */
.bilhete {
  margin-bottom: 18px;
  padding: 14px 16px 16px;
  border-radius: 16px 16px 16px 4px;
  background: var(--papel);
  box-shadow: inset 0 0 0 1.5px var(--lavanda);
}
.bilhete__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta-soft);
}
.bilhete__txt {
  font-size: 17px;
  line-height: 1.5;
}
.bilhete__txt.is-atualizada { animation: bilhete-atualiza var(--motion-emphasis) var(--ease-enter); }

@keyframes bilhete-atualiza {
  from { background-color: rgba(194, 56, 108, 0.12); }
  to { background-color: rgba(194, 56, 108, 0); }
}

/* sem JS: o montador some e fica o link direto */
.encomenda__sem-js { display: none; }
html:not(.js) .pedido { display: none; }
html:not(.js) .encomenda__sem-js { display: flex; margin-top: 20px; }

/* ---------- Botão de ação ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-acao);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.btn i { font-size: 22px; }
.btn--rosa {
  background: var(--rosa);
  color: #FFFFFF;
  box-shadow: 0 10px 18px -12px rgba(165, 44, 90, 0.8);
}
.btn--rosa:active {
  transform: scale(var(--press-scale));
  background: var(--rosa-press);
}
.btn--rosa:focus-visible { outline-color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .btn--rosa:hover { background: var(--rosa-press); }
}

/* ---------- Cena 5: a etiqueta ---------- */

.dizem { margin-bottom: var(--scene); }

.etiqueta {
  position: relative;
  margin: 26px 6px 12px;
  rotate: -1deg;
  filter: drop-shadow(0 10px 14px rgba(58, 52, 86, 0.14));
}
/* o fio que amarra a etiqueta no pacote */
.etiqueta::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  z-index: 1;
  width: 2px;
  height: 48px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--rosa);
  rotate: 8deg;
  transform-origin: bottom;
}
.etiqueta blockquote {
  margin: 0;
  padding: 50px 22px 14px;
  background:
    radial-gradient(circle at 50% 26px, var(--acucar) 0 6px, var(--lavanda-forte) 6.5px 7.5px, transparent 8px),
    var(--papel);
  clip-path: polygon(16% 0, 84% 0, 100% 34px, 100% 100%, 0 100%, 0 34px);
}
.etiqueta blockquote p {
  font-size: 19px;
  line-height: 1.5;
}
.etiqueta figcaption {
  padding: 0 22px 20px;
  background: var(--papel);
  font-size: 15px;
  color: var(--tinta-soft);
}

/* ---------- Cena 6: CTA final ---------- */

.final {
  margin: 0 calc(-1 * var(--gutter));
  padding: 44px var(--gutter) 40px;
  border-radius: 28px 28px 0 0;
  background: var(--lavanda-clara);
  text-align: center;
}
.final__titulo { max-width: 15ch; margin-inline: auto; }
.final > p { color: var(--tinta); margin-bottom: 22px; }

.final__contato {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}
.final__contato a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--lavanda-forte);
  text-underline-offset: 4px;
}

/* ---------- Rodapé e selo ---------- */

.rodape {
  margin: 0 calc(-1 * var(--gutter));
  padding: 6px var(--gutter) calc(30px + var(--safe-bottom));
  background: var(--lavanda-clara);
  text-align: center;
  color: var(--tinta);
}
.rodape__copy {
  margin: 0;
  padding-top: 18px;
  border-top: 1.5px solid var(--lavanda);
  font-size: 14px;
  color: var(--tinta-soft);
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--rosa);
  --seal-ring: 0.4 1.4;         /* pontilhado: o granulado do confeiteiro */
  --seal-font: var(--text);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

/* ---------- CTA flutuante (Regra do CTA) ---------- */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(14px + var(--safe-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: var(--r-chip);
  background: var(--rosa);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 24px -10px rgba(58, 52, 86, 0.55);
  translate: -50% var(--shift-cta);
  opacity: 0;
  visibility: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    translate var(--motion-standard) var(--ease-exit),
    visibility 0s linear var(--motion-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.cta-flutuante i { font-size: 22px; }
.cta-flutuante.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 280ms var(--ease-enter),
    translate 280ms var(--ease-enter),
    visibility 0s,
    background-color var(--motion-fast) var(--ease-standard);
}
.cta-flutuante:active { background: var(--rosa-press); }
.cta-flutuante:focus-visible { outline-color: var(--tinta); }

/* espaço para o flutuante não cobrir o fim das cenas */
main { padding-bottom: 4px; }
.dizem { padding-bottom: 20px; }

/* ---------- Motion permitido / reduzido ---------- */

@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.abertura .carimbo { display: none; }
  .hero.abertura .massa,
  .massa.is-aperta { animation: none; }
  .hero.abertura .massa > .nome,
  .hero.sem-abertura .massa > .nome { animation: nome-chega 200ms linear both; }
  .bilhete__txt.is-atualizada { animation-duration: 1ms; }
  .credito:active .selo-b2 { rotate: none; }
  .fornada { scroll-snap-type: x proximity; }
}

@media (min-width: 560px) {
  .encomenda,
  .final,
  .rodape { margin-inline: 0; }
  .fornada { grid-auto-columns: 46%; }
}