/* WR Embalagens — Links Oficiais (versão estática) */

:root {
  --brand-navy: oklch(0.33 0.09 252);
  --brand-navy-deep: oklch(0.24 0.07 252);
  --brand-orange: oklch(0.7 0.19 45);
  --brand-teal: oklch(0.62 0.11 195);
  --brand-wine: oklch(0.32 0.12 22);
  --brand-wine-deep: oklch(0.22 0.08 22);
  --paper: oklch(0.93 0.003 250);
  --paper-2: oklch(0.88 0.004 250);
  --ink-light: oklch(0.984 0.003 247.858);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Lexend", system-ui, sans-serif;
  background: var(--paper);
}

/* ---------- Fundo animado ---------- */
.wr-bg {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(60% 40% at 20% 10%, oklch(0.97 0 0 / .8), transparent 70%),
    radial-gradient(50% 35% at 85% 60%, oklch(0.97 0 0 / .6), transparent 70%),
    linear-gradient(160deg, var(--paper), var(--paper-2), var(--paper));
  background-size: 200% 200%, 200% 200%, 300% 300%;
  animation: wr-drift 18s ease-in-out infinite alternate;
}

/* ---------- Ondas decorativas ---------- */
.wr-swoosh {
  pointer-events: none;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  height: 16rem;
  width: 200%;
  animation: wr-wave 12s ease-in-out infinite alternate;
}
.wr-line-teal   { fill: none; stroke: var(--brand-teal); stroke-width: 6; }
.wr-line-orange { fill: none; stroke: var(--brand-orange); stroke-width: 5; }
.wr-line-navy   { fill: none; stroke: var(--brand-navy-deep); stroke-width: 8; }

/* ---------- Container ---------- */
.wr-content {
  position: relative;
  margin: 0 auto;
  max-width: 760px;
  width: 77.083333%;
  padding-top: 3rem;
  padding-bottom: 10rem;
}

/* ---------- Cabeçalho ---------- */
.wr-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1rem;
}
.wr-logo { width: 100%; max-width: 300px; }
.wr-title {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 400;
  color: var(--brand-navy);
}
.wr-title strong { font-weight: 900; }

/* ---------- Lista de botões ---------- */
.wr-links {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wr-links > a + a { margin-top: 5.743243%; }

/* ---------- Botão ---------- */
.wr-card {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 592 / 135;
  overflow: hidden;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 14px 28px -12px oklch(0.2 0.05 252 / .55);
  transition: transform .3s, box-shadow .3s;
}
.wr-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 20px 36px -12px oklch(0.2 0.05 252 / .65);
}
.wr-card-navy { background: linear-gradient(90deg, var(--brand-navy-deep), var(--brand-navy)); }
.wr-card-xmas { background: linear-gradient(90deg, var(--brand-wine-deep), var(--brand-wine)); }

.wr-art {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: 55%;
  object-fit: cover;
  object-position: right;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}

/* ---------- Texto do botão ---------- */
.wr-label {
  position: relative;
  z-index: 1;
  padding-left: 5.574324%;
}
.wr-l1 {
  font-size: 15px;
  line-height: 1;
  color: var(--ink-light);
}
.wr-l2 {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  color: var(--brand-orange);
}
.wr-line { display: block; }

.wr-arrow {
  display: inline-grid;
  place-items: center;
  height: 12px;
  width: 12px;
  margin-left: 6px;
  border-radius: 9999px;
  background: var(--brand-orange);
  color: var(--ink-light);
  vertical-align: middle;
  transition: transform .3s;
}
.wr-arrow svg { height: 8px; width: 8px; }
.wr-card:hover .wr-arrow { transform: translateX(4px); }

/* ---------- Animação de entrada ---------- */
.wr-in {
  opacity: 0;
  animation: wr-enter .7s cubic-bezier(.2, .8, .2, 1) forwards;
}

/* ---------- Desktop ---------- */
@media (min-width: 640px) {
  .wr-content { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; }
  .wr-title { font-size: 2.25rem; }
  .wr-links { margin-top: 2.5rem; gap: 1.25rem; }
  .wr-links > a + a { margin-top: 0; }
  .wr-card { height: 150px; aspect-ratio: auto; border-radius: 14px; }
  .wr-label { padding-left: 2.5rem; }
  .wr-l1, .wr-l2 { font-size: 1.875rem; }
  .wr-l2 { margin-top: 4px; }
  .wr-arrow { height: 28px; width: 28px; margin-left: 12px; }
  .wr-arrow svg { height: 16px; width: 16px; }
}
@media (min-width: 768px) {
  .wr-content { padding-top: 4rem; }
  .wr-title { font-size: 3rem; }
  .wr-links { gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-bg, .wr-swoosh, .wr-in { animation: none !important; }
  .wr-in { opacity: 1; }
}

@keyframes wr-drift {
  0%   { background-position: 0% 0%, 100% 0%, 0% 50%; }
  100% { background-position: 100% 100%, 0% 100%, 100% 50%; }
}
@keyframes wr-wave {
  from { transform: translateX(0); }
  to   { transform: translateX(-30%) translateY(10px); }
}
@keyframes wr-enter {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}