/* KROMA: shared styles for every page.
   Design read: premium store, black and white only. The paintings are the only color on the page.
   Shape rule: 2px everywhere; phone previews use 28px to look like a phone screen. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #fcfcfc;
  --surface: #f3f3f3;
  --ink: #111111;
  --muted: #5e5e5e;
  --line: rgb(17 17 17 / 0.12);
  --accent: #111111;
  --accent-hover: #2b2b2b;
  --on-accent: #fcfcfc;
  --frame: #111111;
  --radius: 2px;
  --radius-phone: 28px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 24px 60px -28px rgb(17 17 17 / 0.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0b;
    --surface: #151515;
    --ink: #f2f2f2;
    --muted: #a3a3a3;
    --line: rgb(242 242 242 / 0.12);
    --accent: #f2f2f2;
    --accent-hover: #ffffff;
    --on-accent: #0b0b0b;
    --frame: #2a2a2a;
    --shadow: 0 24px 60px -24px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
/* Deterrent only: no drag, no long-press "save image" on phones. Real protection is server-side. */
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
img { display: block; max-width: 100%; height: auto; }
/* While the page is not in front (see guardImages in main.js) the art is blurred. */
.kroma-shield img, .kroma-shield .tear-paper, .kroma-shield canvas { filter: blur(28px) brightness(0.7); }
/* Printing shows a notice instead of the art. */
@media print {
  body * { visibility: hidden !important; }
  body::after { content: "KROMA · conteúdo protegido · kromawall.com.br"; visibility: visible; position: fixed; inset: 40% 0 auto; text-align: center; font: 600 20px/1.4 sans-serif; color: #000; }
}
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; font-feature-settings: "tnum"; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Demo bar (only while STORE.demo is true) ---------- */
.demo-bar {
  background: var(--surface);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  text-align: center;
  padding: 8px var(--gutter);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.wordmark { display: inline-flex; color: var(--ink); text-decoration: none; }
/* Brand logo: the SVG is used as a mask so it takes the text color (black or white). */
.logo {
  display: block; height: 28px; aspect-ratio: 1705 / 699; background: currentColor;
  -webkit-mask: url("/assets/brand/kroma-logo.svg") center / contain no-repeat;
  mask: url("/assets/brand/kroma-logo.svg") center / contain no-repeat;
}
.logo-xl { width: 100%; height: auto; color: var(--ink); }
.site-header .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }

/* ---------- Hero (asymmetric split) ---------- */
.hero { padding-block: clamp(32px, 6vw, 88px) clamp(56px, 8vw, 112px); }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5vw, 66px); max-width: 13ch; }
.hero-sub { margin-top: 20px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 34ch; }
.hero .btn { margin-top: 32px; }
/* ---------- Hero stage in 3D ----------
   .stage   perspective (the lens) and the frame that clips the zoom
   .lean    tilts away as you scroll past (scroll-driven, where supported)
   .cam     the camera move on load: close on the screen, low angle -> wide shot
   .tilt    follows the mouse a little (computers only, set by hero.js)
   .plane   each layer at its own depth (translateZ), scaled back so all align at rest
   Screen box = the screen inside laptop-*.webp (square image): 11% / 22.1%, 78% x 50.5%. */
.stage {
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; justify-self: end;
  perspective: 1400px; perspective-origin: 50% 40%; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(#9c9c9c, #e2e2e2 55%, #f4f4f4);
}
.lean, .cam, .tilt, .plane { position: absolute; inset: 0; transform-style: preserve-3d; }
.cam { transform-origin: 50% 46%; }
.tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.9s var(--ease); }
.plane img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* depth of each plane; scale = (1400 - z) / 1400 keeps them aligned while the camera is still */
.plane-sky { transform: translateZ(-260px) scale(1.19); background: linear-gradient(#9c9c9c, #e2e2e2 55%, #f4f4f4); }
.plane-rock { transform: translateZ(70px) scale(0.95); }
.plane-laptop { transform: translateZ(0); }
.plane-phone { transform: translateZ(140px) scale(0.9); pointer-events: none; }

.stage-screen { position: absolute; left: 11%; top: 22.1%; width: 78%; height: 50.5%; overflow: hidden; background: #0b0b0c; }
.stage-art { width: 100%; height: 100%; object-fit: cover; transform-origin: 62% 50%; }
.tear { position: absolute; inset: 0; filter: drop-shadow(0 3px 7px rgb(0 0 0 / 0.32)); will-change: transform, opacity; }
.tear-paper, .tear-fiber { position: absolute; inset: 0; }
.tear-paper { background: url("/assets/hero/paper-1400.webp") center / cover; }
.tear-fiber { background: #fbfaf7; } /* the white torn edge, a hair wider than the paper */
.plane .stage-phone {
  inset: auto 4% 7% auto; width: 19%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover;
  border-radius: 16px; border: 4px solid #111215; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
}

/* Before hero.js runs, the two halves already cover the screen (straight edges). */
.tear-top .tear-paper, .tear-top .tear-fiber { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); }
.tear-bottom .tear-paper, .tear-bottom .tear-fiber { clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%); }

@media (prefers-reduced-motion: no-preference) {
  /* The camera waits close to the screen until the images are ready.
     Failsafe: if the script never runs, everything settles by itself after 5 s. */
  .stage:not(.is-ready) .cam { transform: translate3d(0, 16%, 0) scale(2.15) rotateX(17deg) rotateY(-7deg); }
  /* failsafe only when the script is not running at all (hero.js sets .is-waiting right away) */
  .stage:not(.is-ready):not(.is-waiting) .cam { animation: settle 1s ease 5s forwards; }
  .stage:not(.is-ready):not(.is-waiting) .tear { animation: fade-out 0.6s ease 5s forwards; }
  .stage.is-ready .cam { animation: camera 3.6s cubic-bezier(0.65, 0, 0.12, 1) both; }
  @keyframes camera {
    0% { transform: translate3d(0, 16%, 0) scale(2.15) rotateX(17deg) rotateY(-7deg); }
    55% { transform: translate3d(0, 3%, 0) scale(1.18) rotateX(7deg) rotateY(3deg); }
    100% { transform: none; }
  }
  @keyframes settle { to { transform: none; } }
  @keyframes fade-out { to { opacity: 0; } }

  .tear-paper, .tear-fiber { transition: clip-path 0.5s cubic-bezier(0.3, 0, 0.2, 1); }
  .stage.is-opening .tear-paper, .stage.is-opening .tear-fiber { transition: clip-path 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .stage.is-opening .tear-top { transform: translateY(-1.5%); transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .stage.is-opening .tear-bottom { transform: translateY(1.5%); transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .stage.is-revealed .tear { opacity: 0; transition: opacity 1.1s ease, transform 1.1s ease; }
  .stage.is-revealed .tear-top { transform: translateY(-6%); }
  .stage.is-revealed .tear-bottom { transform: translateY(6%); }

  /* the phone flies in from the camera side, then lands */
  .plane .stage-phone { opacity: 0; transform: translate3d(40%, 30%, 0) rotate(10deg); transition: opacity 1s var(--ease), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .stage.is-revealed .stage-phone { opacity: 1; transform: none; }
  .stage.is-revealed .stage-art { animation: drift 18s ease-in-out 0.6s infinite alternate; }
  @keyframes drift { from { transform: scale(1); } to { transform: scale(1.06); } }

  /* scroll: the MacBook leans back and drifts away as the hero leaves the screen */
  @supports (animation-timeline: view()) {
    .lean { animation: lean linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; transform-origin: 50% 80%; }
    @keyframes lean { to { transform: rotateX(24deg) translate3d(0, -4%, -220px); opacity: 0.35; } }
  }
}
/* Reduced motion: no camera, no paper, the art is simply there */
@media (prefers-reduced-motion: reduce) { .tear { display: none; } }

@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 6fr 6fr; gap: 56px; }
}

/* ---------- What you get (spec rows) ---------- */
.specs { padding-block: clamp(64px, 9vw, 128px); border-top: 1px solid var(--line); }
.specs h2 { font-size: clamp(30px, 4vw, 48px); max-width: 16ch; }
.spec-list { margin: 48px 0 0; padding: 0; list-style: none; display: grid; gap: 40px; }
.spec-list li { display: grid; gap: 8px; }
.spec-value { font-size: clamp(36px, 5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.spec-text { color: var(--muted); max-width: 30ch; }
@media (min-width: 900px) {
  .spec-list { grid-template-columns: 1.1fr 1fr 1fr; gap: 48px; }
  .spec-list li:nth-child(2) { margin-top: 48px; }
  .spec-list li:nth-child(3) { margin-top: 96px; }
}

/* ---------- Gallery (asymmetric grid, 6 cells) ---------- */
.gallery { padding-block: clamp(64px, 9vw, 128px); background: var(--surface); }
.gallery h2 { font-size: clamp(30px, 4vw, 48px); }
.gallery-sub { margin-top: 12px; color: var(--muted); }
.vol-tabs { display: flex; gap: 8px; margin-top: 28px; overflow-x: auto; scrollbar-width: none; }
.vol-tabs button {
  font: inherit; font-size: 15px; padding: 8px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.vol-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.grid {
  margin-top: 32px; display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.grid figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.grid figure:hover img { transform: scale(1.03); }
/* 7 cells: one large, two stacked, a row of three, one wide banner. */
.grid figure { aspect-ratio: 16 / 10; }
.grid figure:nth-child(1), .grid figure:nth-child(7) { grid-column: span 2; }
.grid figure:nth-child(7) { aspect-ratio: 21 / 9; }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, 1fr); gap: 16px; }
  .grid figure { grid-column: span 4; }
  .grid figure:nth-child(1) { grid-column: span 8; grid-row: span 2; aspect-ratio: auto; }
  .grid figure:nth-child(7) { grid-column: span 12; }
}

/* ---------- Announcement bar + nav ---------- */
.announce { background: var(--ink); color: var(--bg); font-size: 13px; text-align: center; padding: 9px var(--gutter); letter-spacing: 0.01em; }
.nav { display: none; gap: 32px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); transition: color 0.2s var(--ease); }
.nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav { display: flex; } }

/* ---------- Shop (packs as products) ---------- */
.shop { padding-block: clamp(56px, 8vw, 112px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(30px, 4vw, 48px); }
.section-head p { color: var(--muted); }
.products { margin-top: 40px; display: grid; gap: 40px 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .products { grid-template-columns: repeat(3, 1fr); } }
.product { display: flex; flex-direction: column; }
.product-media {
  display: grid; gap: 4px; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); background: var(--surface);
}
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.product:hover .product-media img { transform: scale(1.03); }
.product-media[data-count="2"] { grid-template-rows: 1fr 1fr; }
.product-media[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 3fr 2fr; }
.product-media[data-count="3"] img:first-child { grid-column: span 2; }
.product-media[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.product-info { display: grid; gap: 6px; padding-top: 18px; }
.product-badge { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.product-badge { height: 16px; line-height: 16px; }
.product-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.product-desc { color: var(--muted); font-size: 15px; }
.product-price { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.product-price .now { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.product-price .was { text-decoration: line-through; color: var(--muted); font-size: 15px; }
.product .btn { margin-top: 18px; }
.product.is-featured .product-media { outline: 1px solid var(--ink); outline-offset: 6px; }
@media (max-width: 759px) { .product.is-featured { order: -1; } }

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--line); }
.trust ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; }
.trust li { padding: 22px 0; display: grid; gap: 2px; }
.trust li + li { border-top: 1px solid var(--line); }
.trust strong { font-weight: 600; }
.trust span { color: var(--muted); font-size: 15px; }
@media (min-width: 760px) {
  .trust ul { grid-template-columns: repeat(3, 1fr); }
  .trust li { padding: 28px 24px; }
  .trust li:first-child { padding-left: 0; }
  .trust li + li { border-top: 0; border-left: 1px solid var(--line); }
}

/* ---------- Payment methods (footer) ---------- */
.pay { display: grid; gap: 14px; }
.pay-title { font-size: 13px; color: var(--muted); }
.pay-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pay-list li {
  height: 40px; min-width: 64px; padding: 0 12px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.pay-logo {
  display: block; width: 40px; height: 22px; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}

/* ---------- FAQ ---------- */
.faq { padding-block: clamp(64px, 9vw, 128px); border-top: 1px solid var(--line); }
.faq .wrap { display: grid; gap: 40px; }
.faq h2 { font-size: clamp(30px, 4vw, 48px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 32px 22px 0; position: relative;
  font-size: 18px; font-weight: 550;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-weight: 400; font-size: 24px; transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--muted); max-width: 60ch; }
@media (min-width: 900px) {
  .faq .wrap { grid-template-columns: 4fr 8fr; gap: 64px; }
}

/* ---------- Footer ---------- */
.site-footer { padding-block: 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-footer .wrap { display: grid; gap: 28px; }
.footer-top { display: grid; gap: 28px; }
.footer-bottom { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
@media (min-width: 900px) {
  .footer-top { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
  .footer-bottom { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- Simple pages (obrigado, download, legal, link) ---------- */
.page { padding-block: clamp(40px, 8vw, 96px) clamp(64px, 10vw, 128px); }
.page h1 { font-size: clamp(36px, 5vw, 60px); max-width: 16ch; }
.page .lead { margin-top: 16px; font-size: 18px; color: var(--muted); max-width: 46ch; }
.narrow { max-width: 720px; }
.panel { margin-top: 40px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel h2 { font-size: 24px; letter-spacing: -0.02em; }
.panel p { margin-top: 8px; color: var(--muted); }
.panel .btn { margin-top: 24px; }
.upsell { display: grid; gap: 24px; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.upsell p { color: var(--on-accent); opacity: 0.85; }
.upsell .btn-primary { background: var(--on-accent); color: var(--accent); }
.upsell img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: var(--radius); }
@media (min-width: 760px) {
  .upsell { grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; }
}
.steps { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 20px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: baseline; }
.steps li::before {
  counter-increment: step; content: counter(step);
  font-family: "Geist Mono", monospace; color: var(--accent); font-weight: 600;
}

/* Download page */
.dl-meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--muted); }
.dl-vols { margin-top: 48px; display: grid; gap: 40px; }
.dl-vol { display: grid; gap: 20px; }
.dl-vol img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: var(--radius); }
.dl-vol h2 { font-size: 26px; letter-spacing: -0.02em; }
.dl-buttons { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .dl-buttons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .dl-vol { grid-template-columns: 5fr 7fr; align-items: center; gap: 40px; }
}
.state { margin-top: 40px; }

/* Legal pages */
.legal h2 { font-size: 22px; letter-spacing: -0.02em; margin-top: 40px; }
.legal p, .legal li { margin-top: 12px; color: var(--muted); max-width: 68ch; }
.legal ul { padding-left: 20px; }

/* Link-in-bio page */
.bio { min-height: 100dvh; display: grid; place-items: start center; padding: 48px 16px; }
.bio-inner { width: 100%; max-width: 440px; display: grid; gap: 14px; }
.bio-cover { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: var(--radius); margin-bottom: 12px; }
.bio .wordmark { justify-self: center; }
.bio .wordmark .logo { height: 34px; }
.bio p { text-align: center; color: var(--muted); margin-bottom: 16px; }
.bio-link {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; font-weight: 550; transition: border-color 0.2s var(--ease);
}
.bio-link:hover { border-color: var(--ink); }
.bio-link.is-featured { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- Motion (respects reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Pack page (/pack/<slug>) ---------- */
.back-link { font-size: 15px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.pack-top { display: grid; gap: 32px; padding-block: 24px 64px; }
.pack-top > * { min-width: 0; } /* lets the thumbnail strip scroll instead of widening the page */
@media (min-width: 900px) {
  .pack-top { grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; padding-block: 40px 96px; }
  .buy-box { position: sticky; top: 92px; }
}
.viewer-main { position: relative; background: var(--surface); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.viewer-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.viewer-slide img { width: 100%; height: 100%; object-fit: cover; }
.viewer-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  display: grid; place-items: center; border: 0; border-radius: var(--radius); cursor: pointer;
  background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--ink); font: inherit; font-size: 20px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 0.2s var(--ease);
}
.viewer-arrow.prev { left: 12px; }
.viewer-arrow.next { right: 12px; }
.viewer-arrow:disabled { opacity: 0; pointer-events: none; }
.viewer-caption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.viewer-thumbs { margin-top: 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.viewer-thumbs button {
  flex: 0 0 72px; aspect-ratio: 4 / 5; padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer; overflow: hidden; scroll-snap-align: start; opacity: 0.55;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}
.viewer-thumbs button[aria-selected="true"] { opacity: 1; border-color: var(--ink); }
.viewer-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.buy-box { display: grid; gap: 14px; }
.buy-box h1 { font-size: clamp(36px, 4.5vw, 56px); }
.buy-desc { color: var(--muted); font-size: 17px; max-width: 40ch; }
.buy-price { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.buy-price .now { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.buy-price .was { color: var(--muted); text-decoration: line-through; }
.buy-note { font-size: 14px; color: var(--muted); }
.btn-buy { min-height: 60px; font-size: 18px; margin-top: 6px; }
.buy-list { margin: 8px 0 0; padding: 16px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--line); color: var(--muted); }
.buy-list strong { color: var(--ink); font-weight: 600; }

.pieces { padding-block: clamp(56px, 8vw, 112px); background: var(--surface); }
.pieces h2 { font-size: clamp(30px, 4vw, 48px); }
.pieces-grid { margin-top: 40px; display: grid; gap: 24px 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .pieces-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 20px; } }
.pieces-grid figure { margin: 0; }
.pieces-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--line); }
.pieces-grid figcaption { margin-top: 10px; display: grid; gap: 2px; }
.pieces-grid figcaption span { font-size: 14px; color: var(--muted); }

.step-up { padding-block: clamp(48px, 7vw, 96px) 0; }
.step-up-box {
  display: grid; gap: 20px; padding: 28px; border: 1px solid var(--ink); border-radius: var(--radius);
}
.step-up-box h2 { font-size: 26px; letter-spacing: -0.02em; }
.step-up-box p { margin-top: 6px; color: var(--muted); max-width: 52ch; }
@media (min-width: 760px) { .step-up-box { grid-template-columns: 1fr auto; align-items: center; } }

/* Phones: fixed bar with price + buy button */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.buy-bar > div { display: grid; }
.buy-bar-name { font-size: 13px; color: var(--muted); }
.buy-bar-price { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.buy-bar .btn { min-height: 48px; }
.pack-page ~ .site-footer { padding-bottom: 96px; }
@media (min-width: 900px) { .buy-bar { display: none; } .pack-page ~ .site-footer { padding-bottom: 48px; } }

/* ---------- Pack not for sale yet ---------- */
.btn[aria-disabled="true"] { background: transparent; color: var(--muted); border-color: var(--line); cursor: not-allowed; pointer-events: none; }
.product.is-unavailable .product-media img { filter: grayscale(0.35) brightness(0.92); }
.product.is-unavailable .product-badge,
.buy-box .product-badge:only-child { color: var(--muted); }
.product.is-unavailable .now { color: var(--muted); }

/* ---------- Cookie consent bar ---------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; max-width: 560px; margin-inline: auto;
  display: grid; gap: 14px; padding: 18px 20px; background: var(--ink); color: var(--bg);
  border-radius: var(--radius); box-shadow: var(--shadow); font-size: 14px; line-height: 1.5;
}
.consent a { color: inherit; }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
.consent .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.consent .btn-primary { background: var(--bg); color: var(--ink); }
.consent .btn-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); }
@media (min-width: 640px) { .consent { grid-template-columns: 1fr auto; align-items: center; } }
/* on pack pages the buy bar sits at the bottom of phones: keep the consent bar above it */
.pack-page ~ .consent { bottom: 92px; }
@media (min-width: 900px) { .pack-page ~ .consent { bottom: 16px; } }

/* ---------- Meta disclaimer (footer, small print) ---------- */
.meta-disclaimer { font-size: 11px; line-height: 1.5; color: var(--muted); opacity: 0.8; max-width: 90ch; }

/* ---------- Download page: one by one ---------- */
.dl-hint { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 15px; }
.dl-pieces-wrap { grid-column: 1 / -1; }
.dl-pieces-wrap details summary { cursor: pointer; color: var(--muted); font-size: 15px; padding: 6px 0; }
.dl-pieces { margin-top: 16px; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .dl-pieces { grid-template-columns: repeat(4, 1fr); } }
.dl-piece { margin: 0; display: grid; gap: 8px; }
.dl-piece img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--line); }
.dl-piece figcaption { display: grid; gap: 8px; font-size: 14px; }
.dl-piece .btn { min-height: 42px; padding: 0 12px; font-size: 14px; width: 100%; }
.dl-buttons.is-secondary { margin-top: 20px; }
.dl-buttons.is-secondary .btn { min-height: 42px; font-size: 14px; }

/* ---------- Checkout (/checkout) ----------
   Order summary + Mercado Pago Payment Brick + our own Pix panel.
   Phones: compact summary on top, form below. Computers: form left, summary right (sticky). */
.co-header .wrap { height: 64px; }
.co-secure { display: inline-flex; align-items: center; gap: 8px; font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.co-lock { position: relative; width: 10px; height: 8px; margin-top: 4px; border-radius: 1px; background: currentColor; }
.co-lock::before { content: ""; position: absolute; left: 1.5px; bottom: 6px; width: 7px; height: 6px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }

.co { padding-block: clamp(24px, 5vw, 64px) clamp(56px, 8vw, 112px); }
.co-grid { display: grid; gap: 28px; }
.co-main { min-width: 0; }
.co-step { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.co-main h1 { margin-top: 10px; font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -0.035em; line-height: 1.02; }
.co-lead { margin-top: 12px; color: var(--muted); max-width: 46ch; }

.co-alert { margin-top: 24px; padding: 14px 16px; border: 1px solid currentColor; border-radius: var(--radius); color: #b42318; background: color-mix(in srgb, #b42318 7%, var(--bg)); font-size: 15px; }
@media (prefers-color-scheme: dark) { .co-alert { color: #ff8a80; background: color-mix(in srgb, #ff8a80 8%, var(--bg)); } }

.co-brick { margin-top: 28px; min-height: 360px; }
.co-skeleton { display: grid; gap: 12px; }
.co-skeleton span { display: block; height: 56px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--ink) 6%, var(--surface)) 50%, var(--surface) 100%); background-size: 200% 100%; animation: co-shimmer 1.4s linear infinite; }
.co-skeleton span:last-child { height: 52px; margin-top: 12px; background: color-mix(in srgb, var(--ink) 14%, var(--surface)); }
@keyframes co-shimmer { to { background-position: -200% 0; } }

.co-fineprint { margin-top: 28px; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.co-fineprint a { color: var(--ink); }

/* Summary */
.co-summary-inner { display: grid; grid-template-columns: 96px 1fr; gap: 16px 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.co-cover { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--line); }
.co-eyebrow { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.co-pack h2 { margin-top: 2px; font-size: 20px; letter-spacing: -0.02em; }
.co-desc, .co-features { display: none; }
.co-total { grid-column: 1 / -1; margin: 0; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
.co-total div { display: flex; justify-content: space-between; gap: 16px; }
.co-total dt { color: var(--muted); }
.co-total dd { margin: 0; }
.co-total .co-total-line { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 600; }
.co-total .co-total-line dt { color: var(--ink); }
.co-trust { display: none; }

@media (min-width: 960px) {
  .co-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .co-summary { grid-column: 2; grid-row: 1; position: sticky; top: 96px; }
  .co-main { grid-column: 1; grid-row: 1; }
  .co-summary-inner { grid-template-columns: 1fr; gap: 22px; padding: 28px; }
  .co-cover { width: 100%; }
  .co-pack h2 { font-size: 28px; }
  .co-desc { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; }
  .co-features { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
  .co-features li { display: flex; gap: 10px; align-items: baseline; }
  .co-features li::before { content: ""; flex: none; width: 10px; height: 5px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-3px) rotate(-45deg); }
  .co-total { padding-top: 18px; }
  .co-trust { display: grid; gap: 14px; margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); }
  .co-trust li { display: grid; gap: 2px; font-size: 14px; }
  .co-trust span { color: var(--muted); }
}

/* Pix */
.co-pix { margin-top: 28px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.co-pix-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.co-pix-head h2 { font-size: 24px; letter-spacing: -0.02em; }
.co-pix-timer { color: var(--muted); font-size: 14px; }
.co-pix-timer strong { font-family: "Geist Mono", monospace; color: var(--ink); font-weight: 600; }
.co-pix-body { margin-top: 24px; display: grid; gap: 24px; justify-items: center; }
.co-qr { width: 220px; height: 220px; padding: 10px; background: #fff; border-radius: var(--radius); image-rendering: pixelated; }
.co-pix-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; color: var(--muted); }
.co-pix-steps strong { color: var(--ink); }
@media (min-width: 640px) { .co-pix-body { grid-template-columns: auto 1fr; align-items: center; justify-items: start; } }
.co-code-label { display: block; margin-top: 24px; font-size: 13px; color: var(--muted); }
.co-code { margin-top: 8px; display: grid; gap: 10px; }
.co-code input { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: 13px "Geist Mono", monospace; text-overflow: ellipsis; }
@media (min-width: 640px) { .co-code { grid-template-columns: 1fr auto; } }
.co-waiting { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.co-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: co-pulse 1.4s var(--ease) infinite; }
.co-paid .co-dot { background: #1b7f4b; animation: none; }
@keyframes co-pulse { 50% { opacity: 0.2; transform: scale(0.7); } }
.co-link { margin-top: 18px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.co-link:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .co-skeleton span, .co-dot { animation: none; } }
/* Mercado Pago draws the pay button; make it full width and as tall as the store buttons. */
#co-brick [class*="button-container"], #co-brick button[class*="primary-"] { width: 100%; max-width: none; }
#co-brick button[class*="primary-"] { min-height: 52px; }
@media (min-width: 640px) { #co-brick { margin-inline: -16px; } } /* the Brick has its own 16px inner padding: align it with the title */
.co-pix, .co-alert { scroll-margin-top: 88px; } /* the sticky header never covers them */
#co-brick [class*="mp-checkout-bricks__selector-"] { --disabled-background-color: var(--surface); } /* selected/hovered option in our grey, not Mercado Pago blue */
/* Thank-you page: download button as soon as the payment is confirmed */
.ready { margin-top: 32px; }
.ready-status { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); }
.ready h2 { margin: 0; }