/* ---------------------------------------------------------------
   CASTELLO — estilos globais
   Tudo que é cor, espaçamento e fonte sai das variáveis abaixo.
   Mexeu aqui, muda no site inteiro.
----------------------------------------------------------------*/

/* Fonte licenciada, carregada direto (não depende do que está
   instalado no aparelho de quem visita). Isso resolve o "fringing"
   colorido que o Windows/ClearType causa quando o navegador tenta
   desenhar um negrito artificial em cima de uma fonte qualquer:
   com o arquivo Bold de verdade aqui, isso nunca mais acontece. */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("/assets/fonts/HelveticaNeue-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Perfectly Nineties";
  src: url("/assets/fonts/PerfectlyNineties-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Pesos como 500/600/800 usados pelo site não existem como arquivo
   próprio — o navegador aproxima pro Bold real (700) automaticamente
   quando pedimos algo >= 600, evitando negrito sintético mesmo
   assim. Ver a nota em `body` mais abaixo. */

:root {
  --bg: #161616;
  --raise: #1e1e1e;
  --line: #2f2f2f;
  --text: #f4f3f0;
  --dim: #94948f;
  --red: #e00000;

  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 940px;
  --gut: 24px;
}

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

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

body {
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  /* alguns blocos (vídeo da página de LUTs, painel de preço) usam
     width:100vw de propósito pra ocupar a tela inteira, quebrando o
     container centralizado. Em desktop com barra de rolagem visível,
     100vw conta a largura dela — o que 100% não conta — e isso pode
     empurrar esses blocos alguns pixels além da borda direita da
     tela, cortando o canto arredondado de lá. Isso impede que esse
     vazamento vire rolagem horizontal na página inteira. */
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

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

/* ---------------- cabeçalho ---------------- */

header {
  border-bottom: 1px solid var(--line);
  padding: 22px var(--gut);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
}

.brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.brand {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.055em;
  text-decoration: none;
  line-height: 1;
}

/* Marca ao lado do nome no cabeçalho. Usa mask-image: assim, a cor
   sai sempre sólida no vermelho do site (var(--red)), com fundo
   transparente, não importa a cor original do arquivo. */
.brand-mark {
  display: block;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  background-color: var(--red);
  -webkit-mask: url("/assets/logo-mark.png") center / contain no-repeat;
  mask: url("/assets/logo-mark.png") center / contain no-repeat;
}

header nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

header nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--dim);
  transition: color 0.2s;
}

header nav a:hover {
  color: var(--text);
}

header nav a[aria-current="page"] {
  color: var(--text);
}

/* ---------------- corpo ---------------- */

main {
  flex: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 72px var(--gut) 96px;
}

h1 {
  font-size: clamp(2.4rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.98;
  margin-bottom: 22px;
}

h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

/* topo da página de LUTs: descrição centralizada como bloco, já que
   aqui é uma página de produto, não um texto corrido — sem isso, o
   limite de 62ch do parágrafo (bom pra leitura) sobra um vão vazio
   à direita num container largo */

.luts-hero {
  max-width: 620px;
  margin: 0 auto 8px;
  text-align: center;
}

.luts-hero .mark {
  margin-left: auto;
  margin-right: auto;
}

.luts-hero .prose p {
  max-width: none;
}

.lut-cta-top {
  margin-bottom: 12px;
}

/* em telas largas o texto centralizado, de tamanho variável linha a
   linha, fica com um contorno "picotado" pouco cuidado — justificado
   (bordas retas dos dois lados) lê como texto de verdade, tipo
   matéria de revista. Em telas estreitas isso vira buracos feios
   entre poucas palavras por linha, por isso só entra a partir daqui */
@media (min-width: 721px) {
  .luts-hero .prose p {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
  }

  /* página de licença: texto corrido, sem imagem do lado — uma
     coluna estreita alinhada só à esquerda, com bastante vazio na
     tela inteira, parecia que a página não tinha se adaptado pro
     desktop. Justificado (mesma lógica acima) e uma medida um pouco
     mais larga resolvem isso sem virar parede de texto. */
  .prose--article p {
    max-width: 70ch;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
  }
}

/* ---------------- vídeo de topo da página de LUTs ---------------- */

/* Vídeo de largura cheia, direto abaixo do cabeçalho — fica fora do
   container centralizado do site de propósito, pra ocupar a tela
   inteira. */

.lut-video-hero {
  position: relative;
  width: 100%;
  height: min(78vh, 680px);
  min-height: 360px;
  overflow: hidden;
  background: #000;
}

.lut-video-hero video,
.lut-video-hero .lut-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lut-video-poster {
  display: none;
}

.lut-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.lut-video-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0;
  padding: 0 24px;
  text-align: center;
}

.lut-video-title-main {
  font-family: "Perfectly Nineties", "Helvetica Neue", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: 1;
  letter-spacing: -0.08em;
  color: var(--red);
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.6);
}

.lut-video-title .lut-tm {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.32em;
  vertical-align: top;
  margin-left: 0.12em;
}

.lut-video-title-sub {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  letter-spacing: -0.01em;
  color: var(--text);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* o resto da página "sobe" por cima do vídeo, com os dois cantos de
   cima arredondados — o vídeo continua visível atrás da curva */

main.lut-page {
  position: relative;
  width: 100%;
  max-width: none;
  margin-top: -28px;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
}

/* o conteúdo em si continua com a largura e o respiro normais do
   site — só a "casca" arredondada precisa ser 100% da tela */
.lut-page-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 72px var(--gut) 96px;
}

@media (prefers-reduced-motion: reduce) {
  .lut-video-hero video {
    display: none;
  }

  .lut-video-poster {
    display: block;
  }
}

@media (max-width: 720px) {
  .lut-video-hero {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 220px;
    max-height: 420px;
  }

  main.lut-page {
    margin-top: -20px;
    border-radius: 20px 20px 0 0;
  }
}

p {
  max-width: 62ch;
}

.lead {
  font-size: 1.2rem;
  color: var(--dim);
  margin-bottom: 8px;
}

.prose p + p {
  margin-top: 18px;
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 56px 0;
}

.mark {
  width: 64px;
  height: 6px;
  background: var(--red);
  margin-top: 22px;
  margin-bottom: 40px;
}

/* ---------------- hero da home ---------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 12px;
}

.hero-frame {
  position: relative;
  width: min(66vw, 400px);
}

.hero-photo {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #000;
  border: 1px solid var(--line);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

.hero-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 800;
  font-size: clamp(2.2rem, 16vw, 7.5rem);
  letter-spacing: -0.065em;
  line-height: 1;
  color: var(--red);
}

.hero-tag {
  margin-top: 36px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  max-width: 34ch;
}

@media (max-width: 560px) {
  .hero-tag {
    font-size: 0.98rem;
  }
}

/* ---------------- links de texto ---------------- */

.link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--red);
  padding-bottom: 1px;
  transition: color 0.2s;
}

.link:hover {
  color: var(--red);
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  border: 1px solid var(--line);
  background: var(--raise);
  padding: 13px 22px;
  transition: border-color 0.2s, background 0.2s;
}

.btn:hover {
  border-color: var(--text);
  background: #262626;
}

/* ---------------- índice da home ---------------- */

.index {
  list-style: none;
  border-top: 1px solid var(--line);
}

.index li {
  border-bottom: 1px solid var(--line);
}

.index a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 4px;
  color: var(--text);
  text-decoration: none;
  transition: padding-left 0.22s ease, background 0.22s;
}

.index a:hover {
  padding-left: 14px;
  background: var(--raise);
}

.index .t {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.index .d {
  color: var(--dim);
  font-size: 0.95rem;
}

/* variante compacta: usada onde os links são um complemento,
   não a navegação principal (ex.: "também estou em") */

.index--social a {
  padding-top: 14px;
  padding-bottom: 14px;
}

.index--social .t {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.index--social .d {
  font-size: 0.85rem;
}

/* ---------------- blocos de equipamento ---------------- */

.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.gear-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  background: var(--raise);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}

.gear-card:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}

.gear-photo {
  aspect-ratio: 1 / 1;
  background: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.gear-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* a foto do produto já vem com fundo claro de estúdio; multiply
     funde esse fundo com o card em vez de deixar uma borda visível */
  mix-blend-mode: multiply;
}

.gear-info {
  padding: 14px 16px 16px;
}

.gear-name {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.gear-store {
  display: block;
  margin-top: 4px;
  color: var(--dim);
  font-size: 0.85rem;
}

/* ---------------- livros ---------------- */

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px;
}

.book-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
}

.book-cover {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--raise);
  border: 1px solid var(--line);
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.book-card:hover .book-cover img {
  transform: scale(1.03);
}

.book-title {
  display: block;
  margin-top: 12px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.book-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--dim);
  font-size: 0.82rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.status-dot--green {
  background: #2ecc71;
}

.status-dot--blue {
  background: #4da3ff;
}

.status-dot--orange {
  background: #f2994a;
}

/* na página do livro, o status vem logo abaixo do h1 — um pouco
   maior que no card da listagem */

.book-detail-body .book-status {
  margin-top: 10px;
  font-size: 0.9rem;
}

/* página de um livro específico */

.book-detail {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.book-detail-cover {
  flex: none;
  width: min(280px, 100%);
  border: 1px solid var(--line);
  background: var(--raise);
}

.book-detail-cover img {
  width: 100%;
  display: block;
}

.book-detail-body {
  flex: 1;
  min-width: 280px;
}

.specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 9px;
  column-gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.spec-row {
  display: contents;
}

.spec-label {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  padding-top: 2px;
}

.spec-value {
  color: var(--text);
}

.book-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* ---------------- vídeos ---------------- */

.featured {
  margin-bottom: 18px;
}

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--raise);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  padding: 0;
  display: block;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity 0.25s, transform 0.4s;
}

.frame:hover img {
  opacity: 1;
  transform: scale(1.015);
}

.frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.play::after {
  content: "";
  border-left: 18px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

.v-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.v-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 2px 8px;
  white-space: nowrap;
}

.date {
  color: var(--dim);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* lista dos anteriores */

.older {
  list-style: none;
  border-top: 1px solid var(--line);
}

.older li {
  border-bottom: 1px solid var(--line);
}

.older-row {
  display: grid;
  grid-template-columns: 92px 200px 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px 4px;
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.older-row:hover {
  background: var(--raise);
}

.older-row .date {
  align-self: start;
  padding-top: 4px;
}

.older-row .thumb {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  width: 100%;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.older-row:hover .thumb {
  opacity: 1;
}

.older-row .t {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.older li.open .older-row {
  display: none;
}

.older .expanded {
  padding: 18px 0 26px;
}

/* estados de carregamento / erro */

.status {
  color: var(--dim);
  padding: 28px 0;
}

.skeleton {
  aspect-ratio: 16 / 9;
  background: var(--raise);
  border: 1px solid var(--line);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---------------- mosaico de fotografia ---------------- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 6px;
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--raise);
  overflow: hidden;
  cursor: zoom-in;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.shot:hover img {
  transform: scale(1.045);
}

.shot.wide {
  grid-column: span 2;
}

.shot.tall {
  grid-row: span 2;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(10, 10, 10, 0.93);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--raise);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s;
}

.lightbox-close:hover {
  border-color: var(--text);
}

/* setas de anterior/próxima da foto ampliada */

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: rgba(30, 30, 30, 0.75);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s;
}

.lightbox-nav:hover {
  border-color: var(--text);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

@media (max-width: 560px) {
  .mosaic {
    grid-auto-rows: 120px;
    gap: 4px;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }
}

/* ---------------- contato ---------------- */

.card {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 1px solid var(--line);
  flex: none;
}

.contact-body {
  flex: 1;
  min-width: 220px;
}

.contact-name {
  display: block;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.contact-role {
  display: block;
  margin-top: 6px;
  color: var(--dim);
  font-size: 1rem;
}

/* card de destaque (ex.: link pro equipamento na página de contato) */

.promo-card {
  display: block;
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: var(--raise);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}

.promo-card:hover {
  border-color: var(--text);
  background: #242424;
}

.promo-q {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.promo-cta {
  display: inline-block;
  margin-top: 10px;
  color: var(--red);
  font-weight: 600;
  font-size: 0.92rem;
}

/* ---------------- rodapé ---------------- */

footer {
  border-top: 1px solid var(--line);
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
  padding: 30px var(--gut) 46px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

footer a {
  text-decoration: none;
  color: var(--dim);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

footer a:hover {
  color: var(--text);
}

footer .copy {
  margin-left: auto;
  color: #5e5e5a;
  font-size: 0.85rem;
}

/* ---------------- responsivo ---------------- */

@media (max-width: 720px) {
  main {
    padding-top: 48px;
  }

  header {
    padding-top: 18px;
    padding-bottom: 16px;
  }

  header nav {
    gap: 14px;
    width: 100%;
  }

  header nav a {
    font-size: 0.85rem;
  }

  .older-row {
    grid-template-columns: 128px 1fr;
    gap: 14px;
    align-items: start;
  }

  .older-row .date {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .play {
    width: 52px;
    height: 52px;
  }

  footer .copy {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- comparador antes/depois (LUTs) ---------------- */

.compare {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  --pos: 50%;
}

.compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

.compare-after {
  clip-path: inset(0 0 0 var(--pos));
}

.compare-tag {
  position: absolute;
  bottom: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  pointer-events: none;
}

.compare-tag--before {
  left: 12px;
}

.compare-tag--after {
  right: 12px;
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 0;
  z-index: 3;
  pointer-events: none;
}

.compare-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--red);
}

.compare-handle::after {
  content: "\276E\276F";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: -0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  z-index: 5;
}

.compare-caption {
  margin-top: 10px;
  color: var(--dim);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------------- botão travado (produto ainda não à venda) ---------------- */

.btn--locked {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  opacity: 0.65;
  cursor: not-allowed;
}

.btn--locked svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ---------------- comparação dos três LUTs (retrato) ---------------- */

.lut-variants {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.lut-variant-name {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  text-align: center;
}

@media (max-width: 640px) {
  .lut-variants {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}

.lut-compat {
  text-align: center;
  margin-top: 48px;
}

.lut-compat-label {
  max-width: none; /* senão herda o limite de 62ch de todo parágrafo
    do site e fica puxado pra esquerda em vez de centralizado */
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}

.lut-compat-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
}

.lut-compat-icon {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.lut-compat-note {
  max-width: none;
  color: var(--dim);
  font-size: 0.9rem;
}

/* ---------------- painel de preço (fundo claro, largura cheia) ---------------- */

/* mesma técnica do vídeo lá em cima: largura cheia (quebra o
   container centralizado de propósito), cantos arredondados subindo
   por cima do bloco anterior. Aqui acontece duas vezes seguidas —
   claro subindo sobre o escuro, depois escuro de novo subindo sobre
   o claro — pra "abrir uma aba" e depois fechar. */

.lut-price-panel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  background: var(--text);
}

.lut-page-resume {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
}

.lut-price-panel .lut-page-inner {
  text-align: center;
}

.lut-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-bottom: 32px;
}

.lut-price-old,
.lut-price-new {
  position: relative;
  display: inline-block;
  color: var(--bg);
}

.lut-price-old {
  font-size: 1.7rem;
  font-weight: 700;
  opacity: 0.65;
}

.lut-price-new {
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* as marcas (risco e círculo) são desenhadas à mão, em PNG com
   fundo transparente — ficam absolutas, por cima do número, meio
   maiores que o texto pra parecer rabiscado de propósito, não
   recortado certinho */
.lut-mark {
  position: absolute;
  max-width: none; /* a regra geral "img { max-width:100% }" do site
    limitava essas marcas à largura do próprio texto do preço (o
    container delas), porque max-width em elemento absoluto resolve
    contra o container — por isso elas nunca ficavam maiores que o
    preço, não importava o valor em "width" aqui embaixo */
  pointer-events: none;
  user-select: none;
}

/* em "em", não porcentagem: porcentagem de posição/largura num filho
   absoluto resolve contra a caixa do pai (que pode variar com
   detalhes de line-height/arredondamento), enquanto "em" acompanha
   o tamanho da fonte de cada preço diretamente — e como o preço usa
   clamp() pra mudar de tamanho conforme a largura da tela, só "em"
   mantém a marca encaixada certinho em qualquer largura. Valores
   medidos a partir do texto renderizado de verdade, não de olho. */
.lut-mark-scribble {
  width: 5em;
  left: -0.33em;
  top: 0.5em;
}

.lut-mark-circle {
  width: 4.7em;
  left: -0.59em;
  top: -0.78em;
}

.lut-contents-title-accent {
  color: var(--red);
}

.lut-price-vhs {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto 36px;
}

.lut-contents {
  max-width: 320px;
  margin: 8px auto 32px;
  text-align: left;
}

.lut-contents-title {
  font-weight: 700;
  color: var(--bg);
  text-align: center;
  margin-bottom: 12px;
}

.lut-contents-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lut-contents-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  color: var(--bg);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.12);
}

.lut-contents-list li:last-child {
  border-bottom: none;
}

.lut-contents-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 9px;
  color: #1e9e4a;
  font-weight: 700;
}

/* "adesivo colado na fita": torto, sombra sólida, fundo claro — em
   vez de mais um botão verde genérico, remete ao adesivo de aviso
   que já existe na própria embalagem da VHS ao lado */

.lut-buy-wrap {
  max-width: none; /* sem isso, herdava o limite de 62ch de todo
    parágrafo do site e ficava puxado pra esquerda em vez de centralizado */
  margin-top: 8px;
}

.lut-license-line {
  max-width: none;
  margin-top: 22px;
  color: rgba(22, 22, 22, 0.6);
  font-size: 0.82rem;
}

.lut-license-line a {
  color: var(--bg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lut-buy {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--text);
  color: var(--bg);
  border: 2px solid var(--bg);
  padding: 13px 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 #1e9e4a;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.lut-buy:hover {
  background: var(--text);
  transform: rotate(-3deg) translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1e9e4a;
}

@media (max-width: 720px) {
  .lut-price-panel,
  .lut-page-resume {
    margin-top: -20px;
    border-radius: 20px 20px 0 0;
  }
}

/* ---------------- benefícios (LUTs) ---------------- */

/* essa seção "chega" visualmente pela curva arredondada logo acima
   (ver .lut-page-resume) — sem isso, o respiro padrão de 72px do
   .lut-page-inner somado ao space do .lut-benefits deixava um vazio
   grande demais entre a curva e o primeiro item */
.lut-page-resume .lut-page-inner {
  padding-top: 40px;
}

.lut-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  text-align: center;
}

.lut-benefit h3 {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.lut-benefit p {
  color: var(--dim);
  font-size: 0.92rem;
  max-width: none;
}

@media (max-width: 720px) {
  .lut-benefits {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}