:root {
  --papel: #F1F2F4;
  --azulejo-claro: #E3E7EE;
  --tinta: #1C1F26;
  --tinta-suave: #5B6170;
  --linha: #D2D7DF;
  --azulejo: #1F48B8;
  --azulejo-forte: #183A96;
  --etiqueta: #FFE14A;
  --etiqueta-tinta: #1C1F26;
  --vendido: #E5484D;

  --fonte: "Schibsted Grotesk", system-ui, sans-serif;
  --caneta: "Permanent Marker", "Comic Sans MS", cursive;

  --margem: clamp(16px, 4vw, 48px);
  --largura: 1240px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #16181D;
    --azulejo-claro: #20242C;
    --tinta: #ECEEF2;
    --tinta-suave: #9AA1AE;
    --linha: #2E333D;
    --azulejo: #7EA0FF;
    --azulejo-forte: #A4BDFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #16181D;
  --azulejo-claro: #20242C;
  --tinta: #ECEEF2;
  --tinta-suave: #9AA1AE;
  --linha: #2E333D;
  --azulejo: #7EA0FF;
  --azulejo-forte: #A4BDFF;
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* A etiqueta cresce na animação de entrada; sem isso o celular ganha rolagem lateral */
.abertura,
.vitrine { overflow-x: clip; }

h1, h2, h3, p, ol, ul { margin: 0; }

a { color: inherit; }

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

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Topo */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 20px var(--margem);
}

.marca {
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* Botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--azulejo);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--azulejo-forte); }

.botao-leve {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--linha);
  font-weight: 500;
}
.botao-leve:hover { background: var(--azulejo-claro); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .botao:not(.botao-leve) { color: #10131A; }
}
:root[data-theme="dark"] .botao:not(.botao-leve) { color: #10131A; }

/* Abertura */

.abertura {
  position: relative;
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(32px, 8vw, 96px) var(--margem) clamp(40px, 7vw, 80px);
}

.abertura h1 {
  max-width: 14ch;
  font-size: clamp(2.5rem, 7.2vw, 5.75rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.abertura-texto {
  max-width: 46ch;
  margin-top: clamp(20px, 3vw, 32px);
  color: var(--tinta-suave);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.relogio {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 24px;
  padding: 8px 16px 8px 14px;
  border-radius: 20px;
  background: var(--azulejo-claro);
  font-size: 0.9375rem;
}
.relogio[hidden] { display: none; }
.relogio strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pulso {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vendido);
}
@media (prefers-reduced-motion: no-preference) {
  .pulso { animation: pulsar 1.6s ease-in-out infinite; }
}
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
}

/* Etiqueta de preço: o detalhe que dá cara ao site */

.etiqueta {
  --tam: 76px;
  --giro: -8deg;
  position: absolute;
  display: grid;
  place-content: center;
  width: var(--tam);
  height: var(--tam);
  border-radius: 50%;
  background: var(--etiqueta);
  color: var(--etiqueta-tinta);
  font-family: var(--caneta);
  font-size: calc(var(--tam) * 0.29);
  line-height: 0.95;
  text-align: center;
  transform: rotate(var(--giro));
  box-shadow: 0 1px 0 rgba(28, 31, 38, 0.18), 0 6px 14px -8px rgba(28, 31, 38, 0.45);
  pointer-events: none;
}
.etiqueta small {
  display: block;
  font-size: 0.5em;
  opacity: 0.8;
}

.etiqueta-abertura {
  --tam: clamp(88px, 13vw, 140px);
  --giro: 9deg;
  top: clamp(28px, 7vw, 88px);
  right: var(--margem);
  font-size: calc(var(--tam) * 0.26);
}

.etiqueta-vendido {
  background: var(--vendido);
  color: #fff;
  font-size: calc(var(--tam) * 0.2);
}

/* Vitrine */

.vitrine {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--tinta);
}

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

.chip {
  min-height: 40px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  box-shadow: inset 0 0 0 1.5px var(--linha);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.chip:hover { color: var(--tinta); }
.chip[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
  box-shadow: none;
}

.ordem {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-suave);
}
.ordem select {
  min-height: 40px;
  padding: 6px 32px 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--azulejo-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6170' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 10px;
  color: var(--tinta);
  font: inherit;
  appearance: none;
  cursor: pointer;
}

.contagem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 14px 0 28px;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}
.contagem > span:first-child { color: var(--tinta); font-weight: 500; }

.saida {
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: var(--linha);
  overflow: hidden;
}
.saida > span {
  display: block;
  height: 100%;
  background: var(--vendido);
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 48px 28px;
  padding: 0;
  list-style: none;
}

.item-link {
  display: block;
  text-decoration: none;
  border-radius: 6px;
}

.item-midia {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  border-radius: 6px;
  background: var(--azulejo-claro);
}
.item-midia > img,
.item-midia > .arte {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.item-midia > img { object-fit: cover; }

.arte {
  display: block;
  padding: 10%;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s ease;
}
.arte .fino { stroke-width: 1.6; stroke: var(--tinta-suave); }
.arte .cheio { fill: var(--papel); }
.arte .teclas { stroke-width: 6; stroke-dasharray: 9 5; stroke-linecap: butt; stroke: var(--tinta-suave); }

.item .etiqueta {
  top: -14px;
  right: -10px;
}
.item:nth-child(3n + 2) .etiqueta { --giro: 7deg; }
.item:nth-child(3n) .etiqueta { --giro: -3deg; }

.item-link:hover .arte,
.item-link:focus-visible .arte { transform: scale(1.04); }

.selo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--azulejo);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.item-nome {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.item-info {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 4px;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}

.item-info .desconto {
  color: var(--azulejo);
  font-weight: 700;
}

.item[data-status="vendido"] .item-midia > *:not(.etiqueta) { opacity: 0.35; }
.item[data-status="vendido"] .item-nome { color: var(--tinta-suave); }

/* Entrada: as etiquetas são coladas uma a uma ao carregar */

@media (prefers-reduced-motion: no-preference) {
  .chegando .etiqueta {
    animation: colar 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
    animation-delay: calc(var(--i) * 60ms + 200ms);
  }
  .etiqueta-abertura {
    animation: colar 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both 0.1s;
  }
}
@keyframes colar {
  from { opacity: 0; transform: rotate(calc(var(--giro) - 30deg)) scale(1.6); }
  to { opacity: 1; transform: rotate(var(--giro)) scale(1); }
}

/* Como comprar */

.como {
  max-width: var(--largura);
  margin: clamp(72px, 10vw, 128px) auto 0;
  padding: 0 var(--margem);
}
.como h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--tinta);
}
.como ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px 40px;
  padding: 24px 0 0;
  list-style: none;
  counter-reset: passo;
}
.como li {
  counter-increment: passo;
  max-width: 34ch;
  color: var(--tinta-suave);
}
.como li::before {
  content: counter(passo);
  display: block;
  margin-bottom: 8px;
  color: var(--tinta);
  font-family: var(--caneta);
  font-size: 1.75rem;
  line-height: 1;
}
.como strong { color: var(--tinta); }

.rodape {
  max-width: var(--largura);
  margin: clamp(56px, 8vw, 96px) auto 0;
  padding: 24px var(--margem) 40px;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}

/* Detalhe */

.detalhe {
  width: min(960px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--papel);
  color: var(--tinta);
  overflow: hidden;
}
.detalhe::backdrop {
  background: rgba(16, 19, 26, 0.55);
  backdrop-filter: blur(3px);
}
.detalhe[open] { display: flex; }

@media (prefers-reduced-motion: no-preference) {
  .detalhe[open] { animation: subir 0.25s ease-out; }
  .detalhe[open] .etiqueta-grande { animation: colar 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both 0.15s; }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.detalhe-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  width: 100%;
  overflow-y: auto;
}

.fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
}
.fechar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.fechar:hover { background: var(--azulejo-claro); }

.detalhe-midia {
  position: relative;
  padding: 28px;
  background: var(--azulejo-claro);
}
.detalhe-principal {
  aspect-ratio: 4 / 3;
}
.detalhe-principal img,
.detalhe-principal .arte {
  width: 100%;
  height: 100%;
}
.detalhe-principal img { object-fit: contain; }
.detalhe-midia[data-status="vendido"] .detalhe-principal { opacity: 0.35; }

.etiqueta-grande {
  --tam: 104px;
  --giro: -10deg;
  top: 20px;
  left: 20px;
}

.miniaturas {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
}
.miniaturas button {
  flex: 0 0 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.detalhe-texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 56px 32px 32px;
}
.detalhe-texto h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.detalhe-preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.detalhe-preco strong {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}
.detalhe-preco span,
.detalhe-estado { color: var(--tinta-suave); }

.detalhe-reserva {
  padding: 10px 14px;
  border-left: 3px solid var(--azulejo);
  border-radius: 0 8px 8px 0;
  background: var(--azulejo-claro);
  font-size: 0.9375rem;
}

.detalhe-economia {
  align-self: flex-start;
  margin-top: -6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--etiqueta);
  color: var(--etiqueta-tinta);
  font-weight: 700;
  font-size: 0.9375rem;
}

.detalhe-lista {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linha);
}
.detalhe-lista li {
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
}

.detalhe-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}
.detalhe-acoes .aviso {
  order: 3;
  flex-basis: 100%;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}

/* Telas pequenas */

@media (max-width: 720px) {
  .detalhe {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }
  .detalhe-corpo { grid-template-columns: minmax(0, 1fr); }
  .detalhe-midia { padding: 20px 20px 16px; }
  .detalhe-texto { padding: 24px 20px 28px; }
  .etiqueta-grande { --tam: 84px; top: 14px; left: 14px; }
}

@media (max-width: 560px) {
  .topo .botao { padding: 8px 14px; font-size: 0.9375rem; }
  .topo .so-largo { display: none; }
  .abertura h1 {
    max-width: none;
    padding-right: 64px;
    font-size: clamp(2.125rem, 10vw, 2.75rem);
  }
  .etiqueta-abertura { --tam: 76px; top: 20px; }
  .grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 14px;
  }
  .item .etiqueta { --tam: 58px; top: -10px; right: -6px; }
  .item-nome { font-size: 0.9375rem; }
  .item-info { font-size: 0.8125rem; }
  .filtros { display: grid; }
  .categorias {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(var(--margem) * -1);
    padding: 0 var(--margem);
    scrollbar-width: none;
  }
  .chip { flex: none; }
}