/* Caixa de presente em CSS — tudo em "em": o font-size da .caixa é a largura da caixa. */
.caixa {
  display: block;
  position: relative;
  width: 1em;
  height: 1.3em;
  margin: 0 auto;
  font-size: 200px;
}
.caixa__frente {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1em;
  height: 0.75em;
  border-radius: 0.03em 0.03em 0.07em 0.07em;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 18%, transparent 80%, rgba(0, 0, 0, 0.2)),
    linear-gradient(180deg, var(--oliva-luz), var(--oliva) 55%, var(--oliva-sombra));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 0.12em 0.15em -0.09em color-mix(in srgb, var(--verde-escuro) 75%, transparent);
  z-index: 3;
  overflow: hidden;
}
.caixa__frente::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--papel) 22%, transparent) 0.007em, transparent 0.008em);
  background-size: 0.07em 0.07em;
}
.caixa__boca {
  position: absolute;
  left: 0.015em;
  bottom: 0.69em;
  width: 0.97em;
  height: 0.13em;
  border-radius: 0.025em 0.025em 0 0;
  background: linear-gradient(180deg, var(--verde-medio), var(--verde-noite));
  z-index: 1;
}
.caixa__item {
  position: absolute;
  left: 50%;
  bottom: 0.75em;
  width: 0.64em;
  height: 0.64em;
  margin-left: -0.32em;
  z-index: 2;
}
.caixa__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.11em;
  border: 0.025em solid #fff;
  box-shadow: 0 0.08em 0.13em -0.06em color-mix(in srgb, var(--verde-escuro) 60%, transparent);
  background: #fff;
}
.caixa__fita-v, .caixa__fita-h {
  display: block;
  position: absolute;
  background: linear-gradient(90deg, var(--fita-sombra), var(--fita) 35%, #fffaf0 50%, var(--fita) 65%, var(--fita-sombra));
  box-shadow: 0 0 0.03em rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.caixa__fita-v { left: 50%; top: 0; bottom: 0; width: 0.15em; margin-left: -0.075em; transform-origin: top; }
.caixa__fita-h {
  left: 0; right: 0; top: 50%; height: 0.15em; margin-top: -0.075em; transform-origin: left;
  background: linear-gradient(180deg, var(--fita-sombra), var(--fita) 35%, #fffaf0 50%, var(--fita) 65%, var(--fita-sombra));
}
.caixa__tampa {
  position: absolute;
  left: -0.055em;
  bottom: 0.7em;
  width: 1.11em;
  height: 0.23em;
  border-radius: 0.04em;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.14), transparent 16%, transparent 82%, rgba(0, 0, 0, 0.18)),
    linear-gradient(180deg, color-mix(in srgb, var(--oliva) 70%, #fff), var(--oliva-luz) 60%, var(--oliva));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 0.05em 0.06em -0.03em color-mix(in srgb, var(--verde-escuro) 55%, transparent);
  z-index: 4;
}
.laco {
  position: absolute;
  left: 50%;
  bottom: 0.15em;
  width: 0.66em;
  margin-left: -0.33em;
  transform-origin: 50% 85%;
  z-index: 2;
  overflow: visible;
  filter: drop-shadow(0 0.02em 0.02em rgba(0, 0, 0, 0.3));
}
.laco__alca, .laco__rabo { fill: var(--fita); stroke: var(--fita-sombra); stroke-width: 1.2; }
.laco__dobra { fill: none; stroke: var(--fita-sombra); stroke-width: 1.4; stroke-linecap: round; }
.laco__no { fill: #fffaf0; stroke: var(--fita-sombra); stroke-width: 1.2; }

.etiqueta {
  position: absolute;
  left: 0.64em;
  top: -0.03em;
  transform-origin: 0.04em 0;
  background: #fffaf0;
  border-radius: 0.02em 0.06em 0.06em 0.02em;
  padding: 0.035em 0.06em 0.035em 0.08em;
  box-shadow: 0 0.03em 0.06em -0.03em rgba(0, 0, 0, 0.4);
  text-align: left;
  line-height: 1.15;
  white-space: nowrap;
  z-index: 3;
  color: var(--verde-escuro);
}
.etiqueta::before {
  content: "";
  position: absolute;
  left: 0.03em;
  top: 50%;
  width: 0.025em;
  height: 0.025em;
  margin-top: -0.0125em;
  border-radius: 50%;
  background: var(--creme);
  box-shadow: inset 0 0 0 1px var(--fita-sombra);
}
.etiqueta span { display: block; font-size: 0.045em; text-transform: uppercase; letter-spacing: 0.12em; color: var(--oliva-2); }
.etiqueta strong { display: block; font-family: var(--script); font-weight: 400; font-size: 0.1em; }