/* =========================================================
   Base: tokens, reset, tipografia, botões, formulários e utilidades
   ========================================================= */

:root {
  /* campos e superfícies */
  --ground: #f6f2fb;
  --paper: #ffffff;
  --field: #ece2f8;
  --field-2: #dccbf2;
  --field-soft: #f3ecfb; /* palco de singles: campo azul mais claro, sem fio */
  --navy: #2a1747;
  --navy-2: #3b2266;

  /* tinta */
  --ink: #1e1235;
  --ink-2: #54476e;
  --ink-3: #66597f; /* escurecido para passar 4.5:1 sobre ground e field */

  /* azuis da marca */
  --royal: #7a4fd0;
  --royal-deep: #6038b3;
  --vivid: #9a74e6;
  --sky: #c9b2f0;

  /* brasa: selos, nós de callout e CTA sobre navy (texto navy) */
  --ember: #ff6a2b;
  /* paleta desenhada (texto navy por cima, 9:1 ou mais) */
  --sun: #dcc6f3;
  --sun-soft: #ece0fa;
  --sun-deep: #b48de0;
  --sky-soft: #e9dcfa;
  --sky-deep: #b79be6;
  --mint: #c2efd6;
  --mint-deep: #78cfa2;
  --peach: #ffd9e6;
  --peach-deep: #f29ab8;
  /* texto secundário sobre as cores claras: 7:1 ou mais em todas */
  --kid-ink-2: #3d2f58;
  --ember-deep: #e2531a;

  /* estados */
  --sale: #c2410c;
  --ok: #0b7a53; /* escurecido de #0F8A5F para 4.5:1 em texto pequeno */
  --low: #b45309;
  --out: #8a93a8; /* só em pontos e ícones; texto de esgotado usa --ink-3 */

  /* raridade: só nos glifos de raridade */
  --r-comum: #8a93a8;
  --r-incomum: #0e9f9a;
  --r-rara: #7a4fd0;
  --r-ultra: #6d4aff;
  --r-secreta: #b8901f;
  --r-alt: var(--foil);

  --rule: rgb(30 18 53 / 0.12);
  --rule-2: rgb(30 18 53 / 0.24);
  --rule-on-navy: rgb(255 255 255 / 0.16);
  --foil: conic-gradient(from 200deg, #c9b2f0, #c9b8ff, #f5d98b, #a8e6d6, #c9b2f0);

  /* tipografia */
  --font-display: "Fredoka", "Archivo", "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-display: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);
  --fs-section: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* forma e profundidade */
  /* formas amigáveis, alinhadas ao header: pílulas nos botões, 12px nos
     controles, 16–20px nos contêineres; palcos continuam sem moldura */
  --r: 8px;
  --r-ctl: 12px;
  --r-box: 16px;
  --r-box-lg: 20px;
  --r-pill: 999px;
  --r-stage: 16px;
  --shadow-contact: 0 18px 24px -12px rgb(42 23 71 / 0.35);
  --shadow-pop: 0 2px 6px rgb(42 23 71 / 0.08), 0 24px 48px -20px rgb(42 23 71 / 0.35);

  /* espaço: módulo de 4px */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;
  --s10: 9rem;

  --wrap: 1280px;
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);

  /* movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t1: 160ms;
  --t2: 240ms;
  --t3: 420ms;
  --t4: 700ms;

  /* dente da serrilha do lacre (8x6), para mask-image */
  --tooth-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' preserveAspectRatio='none'%3E%3Cpath d='M0 6L4 0L8 6Z'/%3E%3C/svg%3E");
  --tooth-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0H8L4 6Z'/%3E%3C/svg%3E");

  /* altura real do masthead fixo; o ui.js mede e atualiza */
  --head-h: 7.5rem;

  /* aliases legados (pages.css antigo); remover quando pages.css sair */
  --sheet: var(--paper);
  --well: var(--field);
  --spot: var(--royal);
  --spot-deep: var(--royal-deep);
  --spot-soft: var(--field);
  --on-spot: #ffffff;
  --press: var(--navy);
  --press-2: var(--navy-2);
  --on-press: #ffffff;
  --on-press-2: var(--sky);
  --radius: var(--r);
  --font: var(--font-body);
  --ease: var(--ease-out);
  --shadow: var(--shadow-contact);
  --shadow-lg: var(--shadow-pop);
  --fs-xs: var(--fs-micro);
  --fs-sm: var(--fs-small);
  --fs-md: var(--fs-body);
  --fs-lg: 1.125rem;
  --fs-xl: var(--fs-h3);
  --fs-2xl: var(--fs-section);
  --fs-3xl: var(--fs-display);

  color-scheme: light;
}

/* ---------- reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + var(--s5));
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.is-locked,
body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  text-wrap: balance;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}

/* ---------- superfícies do navegador ---------- */

::selection {
  background: var(--royal);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--vivid);
  outline-offset: 2px;
}

input,
select,
textarea {
  caret-color: var(--royal);
  accent-color: var(--royal);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgb(30 18 53 / 0.28) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgb(30 18 53 / 0.24);
  border: 3px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- tipografia ---------- */

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 820;
  font-stretch: 122%;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.h2,
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 780;
  font-stretch: 115%;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 720;
  font-stretch: 108%;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  text-wrap: pretty;
}

.body {
  font-size: var(--fs-body);
  line-height: 1.55;
  max-width: 68ch;
}

.small {
  font-size: var(--fs-small);
}

.micro {
  font-size: var(--fs-micro);
  line-height: 1.4;
}

/* rótulo de campo de formulário (não é eyebrow de seção) */
.label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}

.muted {
  color: var(--ink-3);
}

/* Martian Mono só para códigos: sigla da coleção, número de coleção,
   certificado e nota. Contagens, datas, medidas, condições e preços usam .num */
.data,
.mono {
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 450;
  font-stretch: 87.5%;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* contagens, datas, medidas: texto. Sem tabular-nums: na Schibsted ele alarga
   ponto, vírgula e dois-pontos até a largura de um algarismo ("1 . 446 , 40") */
.num {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums;
}

/* dinheiro: Archivo com algarismos tabulares (pontuação continua estreita) */
.money {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* código da coleção / do jogo */
.setcode {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding: 0 0.4rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- botões ---------- */

.btn {
  --h: 3rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--h);
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--royal);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t1) var(--ease-out), color var(--t1) var(--ease-out),
    border-color var(--t1) var(--ease-out), transform var(--t1) var(--ease-out);
}

.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.btn:hover {
  background: var(--royal-deep);
}

.btn:active {
  transform: translateY(1px);
}

/* primária: royal com texto branco */
.btn--primary,
.btn--spot {
  background: var(--royal);
  color: #fff;
}

.btn--primary:hover,
.btn--spot:hover {
  background: var(--royal-deep);
}

/* sobre navy: brasa com texto navy */
.btn--ember {
  background: var(--ember);
  color: var(--navy);
}

/* hover clareia (escurecer derruba o contraste do texto navy) */
.btn--ember:hover {
  background: #ff8a57;
  color: var(--navy);
}

.btn--ink,
.btn--navy {
  background: var(--navy);
  color: #fff;
}

.btn--ink:hover,
.btn--navy:hover {
  background: var(--navy-2);
}

.btn--line,
.btn--ghost {
  border-color: var(--ink-3);
  background: transparent;
  color: var(--ink);
}

.btn--line:hover,
.btn--ghost:hover {
  border-color: var(--royal);
  background: var(--field);
  color: var(--royal-deep);
}

/* macia: campo azul sem fio (ação secundária amigável) */
.btn--soft {
  background: var(--field);
  color: var(--royal-deep);
}

.btn--soft:hover {
  background: var(--field-2);
  color: var(--royal-deep);
}

/* linha sobre navy */
.btn--line-light {
  border-color: rgb(255 255 255 / 0.6);
  background: transparent;
  color: #fff;
}

.btn--line-light:hover {
  border-color: #fff;
  background: #fff;
  color: var(--navy);
}

.btn--dashed {
  border: 1px dashed var(--ink-3);
  background: transparent;
  color: var(--ink);
}

.btn--dashed:hover {
  border-style: solid;
  border-color: var(--ink);
  background: transparent;
}

.btn--sm {
  --h: 2.5rem;
  padding: 0 var(--s4);
  font-size: var(--fs-small);
}

.btn--lg {
  --h: 3.5rem;
  padding: 0 var(--s6);
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: transparent;
  background: var(--field);
  color: var(--ink-3);
  transform: none;
}

.btn--line:disabled,
.btn--ghost:disabled {
  border: 1px dashed var(--rule-2);
  background: transparent;
}

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-ctl);
  background: none;
  color: inherit;
  font-size: var(--fs-small);
  font-weight: 550;
  text-decoration: none;
  transition: background-color var(--t1) var(--ease-out), color var(--t1) var(--ease-out);
}

.iconbtn:hover {
  background: rgb(30 18 53 / 0.06);
}

.iconbtn--sm {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

@media (max-width: 960px), (pointer: coarse) {
  .iconbtn--sm {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.glyph {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s2);
  font-size: var(--fs-small);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.link-arrow .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t2) var(--ease-out);
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

/* toque: alvo de 44px */
@media (max-width: 960px), (pointer: coarse) {
  .link-arrow {
    min-height: 2.75rem;
  }
}

/* ---------- formulários ---------- */

.field {
  display: grid;
  gap: var(--s2);
}

.input,
.select {
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--s4);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-ctl);
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--t1) var(--ease-out), box-shadow var(--t1) var(--ease-out);
}

.select {
  padding-right: 2.5rem;
  appearance: none;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1733' stroke-width='1.6'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 1rem;
  cursor: pointer;
}

.input::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.input:hover,
.select:hover {
  border-color: var(--ink-3);
}

.input:focus,
.select:focus {
  outline: 2px solid var(--vivid);
  outline-offset: 1px;
  border-color: var(--royal);
}

.input[aria-invalid="true"] {
  border-color: var(--sale);
}

.field__error {
  font-size: var(--fs-small);
  color: var(--sale);
}

/* escolhas: a escolhida em traço sólido, as disponíveis tracejadas */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.choice {
  position: relative;
  display: inline-flex;
}

.choice > input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  width: 100%;
  min-height: 3rem;
  padding: var(--s2) var(--s4);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-ctl);
  background: transparent;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
  transition: border-color var(--t1) var(--ease-out), background-color var(--t1) var(--ease-out),
    box-shadow var(--t1) var(--ease-out);
}

.choice > span small {
  font-size: var(--fs-micro);
  font-weight: 450;
  color: var(--ink-3);
}

.choice:hover > span {
  border-color: var(--ink-2);
}

.choice > input:checked + span {
  border: 1px solid var(--royal);
  box-shadow: inset 0 0 0 1px var(--royal);
  background: var(--paper);
}

.choice > input:checked + span small {
  color: var(--ink-2);
}

.choice > input:focus-visible + span {
  outline: 2px solid var(--vivid);
  outline-offset: 2px;
}

.choice > input:disabled {
  cursor: not-allowed;
}

.choice > input:disabled + span {
  border-color: var(--rule);
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* sobre navy */
.on-navy .choice > span {
  border-color: rgb(255 255 255 / 0.36);
}

.on-navy .choice > input:checked + span {
  border-color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
  background: var(--navy-2);
}

/* caixas de seleção */
.check {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 2.75rem;
  font-size: var(--fs-small);
  cursor: pointer;
}

.check > input[type="checkbox"],
.check > input[type="radio"] {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--ink-3);
  border-radius: 5px;
  background: var(--paper);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--t1) var(--ease-out), border-color var(--t1) var(--ease-out);
}

.check > input[type="radio"] {
  border-radius: 50%;
}

.check > input::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background: #fff;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 26%, 86% 12%, 38% 72%);
  transform: scale(0);
  transition: transform var(--t1) var(--ease-out);
}

.check > input[type="radio"]::after {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  clip-path: none;
}

.check > input:checked {
  border-color: var(--royal);
  background: var(--royal);
}

.check > input:checked::after {
  transform: scale(1);
}

.check > input:hover {
  border-color: var(--ink);
}

.check > input:checked:hover {
  border-color: var(--royal-deep);
  background: var(--royal-deep);
}

.check > small {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-variant-numeric: lining-nums;
  color: var(--ink-3);
}

/* opção de filtro sem produtos (contagem 0) */
.check:has(input:disabled) {
  color: var(--ink-3);
  cursor: not-allowed;
}

.check > input:disabled,
.check > input:disabled:hover {
  border-color: var(--rule-2);
  background: var(--field);
  cursor: not-allowed;
}

/* interruptor */
.check--switch > input[type="checkbox"] {
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  place-items: center start;
  padding: 2px;
}

.check--switch > input[type="checkbox"]::after {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  clip-path: none;
  background: var(--ink-3);
  transform: none;
  transition: transform var(--t2) var(--ease-out), background-color var(--t1);
}

.check--switch > input:checked::after {
  background: #fff;
  transform: translateX(1rem);
}

/* quantidade */
.qty {
  display: inline-flex;
  align-items: stretch;
  height: 3rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-ctl);
  background: var(--paper);
}

.qty button:first-child {
  border-radius: calc(var(--r-ctl) - 1px) 0 0 calc(var(--r-ctl) - 1px);
}

.qty button:last-child {
  border-radius: 0 calc(var(--r-ctl) - 1px) calc(var(--r-ctl) - 1px) 0;
}

.qty button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  border: 0;
  background: none;
  color: var(--ink);
  transition: background-color var(--t1);
}

.qty button:hover:not(:disabled) {
  background: var(--field);
}

.qty button:disabled {
  color: var(--rule-2);
  background: none;
}

.qty .icon {
  width: 1rem;
  height: 1rem;
}

.qty input {
  width: 2.75rem;
  border: 0;
  border-inline: 1px solid var(--rule);
  background: none;
  text-align: center;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty input:focus-visible {
  outline-offset: -2px;
}

.qty input::-webkit-inner-spin-button,
.qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty--sm {
  height: 2.75rem;
}

.qty--sm button,
.qty--sm input {
  width: 2.5rem;
}

/* toque: botões do seletor pequeno com 44px úteis (46px menos a borda) */
@media (max-width: 960px), (pointer: coarse) {
  .qty--sm {
    height: 2.875rem;
  }

  .qty--sm button {
    width: 2.75rem;
  }
}

/* ---------- layout e utilidades ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s9) var(--s8);
}

.section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.section__head p {
  max-width: 52ch;
  margin-top: var(--s3);
  color: var(--ink-2);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--s4);
  top: var(--s2);
  z-index: 200;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  background: var(--navy);
  color: #fff;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* contexto navy: tinta clara e foco visível */
.on-navy {
  color: #fff;
  --ink-2: rgb(255 255 255 / 0.78);
  --ink-3: var(--sky);
  --rule: var(--rule-on-navy);
}

/* retícula de pontos sobre campos azuis (use background-color no elemento) */
.halftone {
  position: relative;
  isolation: isolate;
}

.halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--halftone-ink, rgb(255 255 255 / 0.065)) 1px, transparent 1.6px);
  background-size: 6px 6px;
  pointer-events: none;
}

/* serrilha do lacre: dentes de 8px x 6px pendurados na borda do campo.
   A cor vem de --crimp-color (padrão navy, igual ao fundo do campo).
   Um único ::after cobre as duas bordas, mascarado no meio: não recorta o conteúdo
   e deixa o ::before livre para a retícula (.halftone). */
.crimp-top,
.crimp-bottom {
  --crimp-color: var(--navy);
  position: relative;
}

.crimp-top::after,
.crimp-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: var(--crimp-color);
  pointer-events: none;
}

.crimp-top::after {
  top: -5.5px;
  -webkit-mask: var(--tooth-up) left top / 8px 6px repeat-x;
  mask: var(--tooth-up) left top / 8px 6px repeat-x;
}

.crimp-bottom::after {
  bottom: -5.5px;
  -webkit-mask: var(--tooth-down) left bottom / 8px 6px repeat-x;
  mask: var(--tooth-down) left bottom / 8px 6px repeat-x;
}

.crimp-top.crimp-bottom::after {
  top: -5.5px;
  bottom: -5.5px;
  -webkit-mask: var(--tooth-up) left top / 8px 6px repeat-x, var(--tooth-down) left bottom / 8px 6px repeat-x;
  mask: var(--tooth-up) left top / 8px 6px repeat-x, var(--tooth-down) left bottom / 8px 6px repeat-x;
}

.rule-dashed {
  margin: 0;
  border: 0;
  border-top: 1px dashed var(--rule-2);
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}