@charset "UTF-8";
/* ==========================================================================
   JOIÊ FRAGRANCES — Sistema de Design
   --------------------------------------------------------------------------
   01. Reset & fundação
   02. Tokens (cor, tipo, espaço, movimento)
   03. Tipografia base
   04. Utilitários & layout
   05. Camada cinematográfica (grão, vinheta, letterbox)
   06. Cortina de abertura & transição de página
   07. Navegação
   08. Botões & links
   09. Sistema de revelação (scroll)
   10. Hero
   11. Marquee
   12. Manifesto
   13. Filme olfativo (vídeo interativo)
   14. Coleção (galeria horizontal + cards)
   15. Pirâmide olfativa
   16. Atelier
   17. Perfume Bar
   18. Assinatura (quiz)
   19. Newsletter & rodapé
   20. Páginas internas (coleção, produto, contato)
   21. Responsivo & preferências
   ========================================================================== */

/* ==========================================================================
   01. RESET & FUNDAÇÃO
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

ul[role="list"],
ol[role="list"] { list-style: none; }

/* [hidden] precisa vencer os display: flex/grid dos componentes */
[hidden] { display: none !important; }

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

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

::selection {
  background: var(--cacao-700);
  color: var(--ivory-100);
}

/* ==========================================================================
   02. TOKENS
   ========================================================================== */

:root {
  /* — Cor: marfim / areia — */
  --ivory-50:  #FDFBF7;
  --ivory-100: #F9F4EC;
  --ivory-200: #F2E9DC;
  --ivory-300: #E9DCC9;
  --sand-400:  #D9C4A8;

  /* — Cor: rosa / pêssego — */
  --blush-200: #F0DCD1;
  --blush-300: #E4C3B4;
  --blush-400: #D3A38C;
  --rose-500:  #BF7F65;

  /* — Cor: cacau / âmbar (do logotipo) — */
  --cacao-500: #A06B44;
  --cacao-600: #8A5A38;
  --cacao-700: #6E4326;
  --umber-800: #4A2C1A;
  --ink-900:   #33200F;

  /* — Cor: noir cinematográfico — */
  --noir:      #14100D;
  --noir-soft: #1E1813;
  --noir-lift: #2A2119;

  /* — Cor: ouro — */
  --gold-400: #D9C48F;
  --gold-500: #C2A25F;

  /* — Papéis semânticos (tema claro) — */
  --bg:         var(--ivory-100);
  --bg-alt:     var(--ivory-200);
  --fg:         #3B2718;
  --fg-muted:   #7A6250;
  --fg-subtle:  #9C8874;
  --accent:     var(--cacao-700);
  --line:       color-mix(in srgb, var(--cacao-700) 16%, transparent);
  --line-soft:  color-mix(in srgb, var(--cacao-700) 9%, transparent);

  /* — Tipografia — */
  --font-display: "Cormorant Garamond", "Cormorant", Didot, "Bodoni MT", Garamond, Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Futura", "Avenir Next", "Century Gothic", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display-xl: clamp(3.25rem, 11.5vw, 11rem);
  --fs-display-l:  clamp(2.75rem, 7.4vw, 6.75rem);
  --fs-display-m:  clamp(2.25rem, 5vw, 4.25rem);
  --fs-h2:         clamp(1.875rem, 3.6vw, 3.25rem);
  --fs-h3:         clamp(1.375rem, 2.1vw, 2rem);
  --fs-h4:         clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body-l:     clamp(1.0625rem, 1.25vw, 1.3125rem);
  --fs-body:       clamp(0.9688rem, 0.95vw, 1.0625rem);
  --fs-small:      0.8125rem;
  --fs-label:      0.6875rem;
  --fs-label-sm:   0.625rem;

  --tracking-label: 0.24em;
  --tracking-wide:  0.12em;

  /* — Espaço — */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y: clamp(4.5rem, 9.5vw, 10.5rem);
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --measure: 62ch;
  --max: 1680px;
  --max-narrow: 1180px;

  /* — Movimento — */
  --ease-expo:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);

  --t-fast: 260ms;
  --t-mid:  620ms;
  --t-slow: 1100ms;
  --t-cine: 1700ms;

  /* — Diversos — */
  --nav-h: clamp(4.25rem, 6vw, 5.5rem);
  --radius: 2px;
  --shadow-soft: 0 24px 60px -32px rgba(58, 39, 24, 0.35);
  --shadow-lift: 0 40px 90px -40px rgba(58, 39, 24, 0.45);
}

/* Seções em tema escuro (cinema) — inverte os papéis semânticos */
.is-noir {
  --bg:        var(--noir);
  --bg-alt:    var(--noir-soft);
  --fg:        var(--ivory-200);
  --fg-muted:  color-mix(in srgb, var(--ivory-200) 62%, transparent);
  --fg-subtle: color-mix(in srgb, var(--ivory-200) 42%, transparent);
  --accent:    var(--gold-400);
  --line:      color-mix(in srgb, var(--ivory-200) 18%, transparent);
  --line-soft: color-mix(in srgb, var(--ivory-200) 10%, transparent);
  color: var(--fg);
  background-color: var(--bg);
}

/* ==========================================================================
   03. TIPOGRAFIA BASE
   ========================================================================== */

body {
  min-height: 100%;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4,
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display-l); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.2; }

.display-xl { font-size: var(--fs-display-xl); line-height: 0.86; }
.display-l  { font-size: var(--fs-display-l); }
.display-m  { font-size: var(--fs-display-m); line-height: 1.08; }

em, .italic {
  font-style: italic;
  font-family: var(--font-display);
}

p { text-wrap: pretty; }

.lede {
  font-size: var(--fs-body-l);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 46ch;
}

.prose {
  max-width: var(--measure);
  color: var(--fg-muted);
}

.prose > * + * { margin-top: 1.1em; }

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  line-height: 1;
}

.label--accent { color: var(--accent); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.eyebrow::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3.5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: clamp(1.5rem, 4vw, 3.5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}

/* Ornamento losango do logotipo */
.diamond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--accent);
}

.diamond::before,
.diamond::after {
  content: "";
  width: 4px;
  height: 4px;
  background: currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

/* ==========================================================================
   04. UTILITÁRIOS & LAYOUT
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: var(--max-narrow); }
.shell--wide { max-width: none; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.section--flush-top { padding-top: 0; }

.stack { display: flex; flex-direction: column; }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
  width: 100%;
}

.center { text-align: center; }
.center .lede, .center .prose { margin-inline: auto; }

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

.skip-link {
  position: fixed;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--cacao-700);
  color: var(--ivory-50);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease-expo);
}

.skip-link:focus-visible { transform: translateY(0); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}

/* Enquadramento de imagem com revelação */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
}

.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--portrait { aspect-ratio: 3 / 4; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--land { aspect-ratio: 4 / 3; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--tall { aspect-ratio: 2 / 3; }

/* Brilho suave sobre fotografia de produto */
.frame--glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 12%, rgba(255, 246, 232, 0.28), transparent 62%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

/* ==========================================================================
   05. CAMADA CINEMATOGRÁFICA
   ========================================================================== */

/* Grão de filme — ruído SVG animado em passos, como projeção 8 fps */
.grain {
  position: fixed;
  inset: -150%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grain-shift 900ms steps(1, end) infinite;
  will-change: transform;
}

@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-4%, 2%, 0); }
  40%  { transform: translate3d(3%, -3%, 0); }
  60%  { transform: translate3d(-2%, -1%, 0); }
  80%  { transform: translate3d(2%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Vinheta cinematográfica */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 42%, rgba(20, 16, 13, 0.42) 100%),
    linear-gradient(to bottom, rgba(20, 16, 13, 0.42), transparent 28%, transparent 62%, rgba(20, 16, 13, 0.72));
}

.vignette--soft {
  background: radial-gradient(115% 95% at 50% 45%, transparent 48%, rgba(20, 16, 13, 0.3) 100%);
}

/* Véu de leitura — garante contraste do texto claro sobre a imagem.
   Sem ele, o título do hero fica ilegível quando a cena está clara. */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(96deg, rgba(20, 16, 13, 0.66) 0%, rgba(20, 16, 13, 0.34) 34%, rgba(20, 16, 13, 0) 62%),
    linear-gradient(to top, rgba(20, 16, 13, 0.62) 0%, rgba(20, 16, 13, 0.12) 38%, rgba(20, 16, 13, 0) 62%);
}

/* Palco de mídia: vídeo com fallback em canvas pintado */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--noir);
}

.stage__media,
.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__media {
  opacity: 0;
  transition: opacity var(--t-cine) var(--ease-soft);
}

.stage__media.is-live { opacity: 1; }
.stage__media.is-live ~ .stage__canvas { opacity: 0; }

.stage__canvas {
  opacity: 1;
  transition: opacity var(--t-cine) var(--ease-soft);
}

/* Névoa em movimento — camada de luz que respira */
.mist {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(38% 42% at 22% 30%, rgba(255, 240, 220, 0.5), transparent 70%),
    radial-gradient(32% 36% at 74% 62%, rgba(228, 195, 180, 0.42), transparent 72%),
    radial-gradient(46% 30% at 50% 88%, rgba(217, 196, 143, 0.28), transparent 74%);
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: mist-drift 34s var(--ease-soft) infinite alternate;
  will-change: transform;
}

@keyframes mist-drift {
  0%   { transform: translate3d(-3%, 1%, 0) scale(1.04); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.12); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.06); }
}

/* Raios de luz oblíquos */
.rays {
  position: absolute;
  inset: -40% -20%;
  pointer-events: none;
  opacity: 0.22;
  background: repeating-linear-gradient(
    102deg,
    transparent 0 5.5rem,
    rgba(255, 245, 228, 0.6) 5.5rem 6rem,
    transparent 6rem 13rem
  );
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: rays-sway 26s ease-in-out infinite alternate;
}

@keyframes rays-sway {
  from { transform: translate3d(-2%, 0, 0) rotate(-0.6deg); }
  to   { transform: translate3d(2%, 1%, 0) rotate(0.6deg); }
}

/* Letterbox 2.39:1 opcional */
.letterbox::before,
.letterbox::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(1.25rem, 4vh, 3.25rem);
  background: var(--noir);
  z-index: 4;
  pointer-events: none;
}
.letterbox::before { top: 0; }
.letterbox::after { bottom: 0; }

/* ==========================================================================
   06. CORTINA DE ABERTURA & TRANSIÇÃO DE PÁGINA
   ========================================================================== */

.overture {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background: var(--noir);
  color: var(--ivory-200);
}

.overture__inner {
  text-align: center;
  display: grid;
  gap: var(--s-5);
  justify-items: center;
}

.overture__mark {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(0.6em);
  animation: overture-mark 1500ms var(--ease-expo) 180ms forwards;
}

.overture__sub {
  font-size: var(--fs-label);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory-200) 55%, transparent);
  opacity: 0;
  animation: overture-sub 1400ms var(--ease-expo) 620ms forwards;
}

.overture__bar {
  width: min(38vw, 14rem);
  height: 1px;
  background: color-mix(in srgb, var(--ivory-200) 22%, transparent);
  position: relative;
  overflow: hidden;
}

.overture__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-400);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 420ms var(--ease-soft);
}

@keyframes overture-mark {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes overture-sub {
  to { opacity: 1; }
}

.overture.is-done {
  animation: overture-out 1200ms var(--ease-quart) forwards;
}

@keyframes overture-out {
  to {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
}

/* Cortina de transição entre páginas */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: var(--noir);
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
}

.curtain.is-in {
  animation: curtain-in 760ms var(--ease-quart) forwards;
}

@keyframes curtain-in {
  to { clip-path: inset(0 0 0 0); }
}

/* Transições de view nativas quando disponíveis */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ==========================================================================
   07. NAVEGAÇÃO
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: var(--ivory-100);
  transition: color var(--t-mid) var(--ease-soft),
              transform var(--t-mid) var(--ease-expo);
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivory-100);
  transform: translateY(-101%);
  transition: transform var(--t-mid) var(--ease-expo);
  z-index: -1;
}

.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom, rgba(20, 16, 13, 0.55), transparent);
  opacity: 1;
  transition: opacity var(--t-mid) linear;
}

.nav.is-solid {
  color: var(--fg);
  border-bottom: 1px solid var(--line-soft);
}
.nav.is-solid::before { transform: translateY(0); }
.nav.is-solid::after { opacity: 0; }

.nav.is-hidden { transform: translateY(-100%); }

.nav__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
}

.nav__links--end { justify-content: flex-end; }

.nav__link {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-block: 0.35rem;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease-expo);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* O tamanho da marca vive no container: assim o espaço entre o nome e o
   subtítulo acompanha a escala do logotipo, e não a fonte herdada em volta. */
.wordmark {
  display: grid;
  justify-items: center;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  gap: 0.3em;
  text-decoration: none;
  line-height: 1;
}

.wordmark__name {
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.015em;
  /* 0.74 tira o excesso de entrelinha do Cormorant; a haste do "J" e o
     circunflexo do "ê" passam do bloco, e o gap acima cobre essa sobra */
  line-height: 0.74;
}

.wordmark__sub {
  font-size: var(--fs-label-sm);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  opacity: 0.72;
  /* compensa o espaçamento que sobra depois da última letra */
  padding-left: 0.42em;
  line-height: 1;
}

/* Variante do rodapé: maior, alinhada à esquerda, com fio abaixo
   ecoando o logotipo impresso */
.wordmark--footer {
  justify-items: start;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  gap: 0.18em;
}

.wordmark--footer .wordmark__sub {
  font-size: var(--fs-label);
  letter-spacing: 0.5em;
  opacity: 0.6;
}

.wordmark--footer::after {
  content: "";
  width: 2.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  margin-top: 0.35rem;
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-left: auto;
}

.nav__toggle-bars {
  display: grid;
  gap: 4px;
  width: 1.35rem;
}

.nav__toggle-bars span {
  height: 1px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease-expo);
}

/* Menu de tela cheia */
.menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--noir);
  color: var(--ivory-200);
  display: grid;
  grid-template-rows: var(--nav-h) 1fr auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease-quart);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu[hidden] { display: none; }
.menu.is-open { clip-path: inset(0 0 0 0); }

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
}

.menu__body {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-content: center;
  padding: var(--s-8) var(--gutter);
  grid-template-columns: 1fr;
}

.menu__list {
  list-style: none;
  display: grid;
  gap: clamp(0.5rem, 1.4vw, 1rem);
}

.menu__item {
  overflow: hidden;
}

.menu__link {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-expo), color var(--t-fast) linear;
}

.menu.is-open .menu__link { transform: translateY(0); }
.menu__link:hover { color: var(--gold-400); }

.menu__link span {
  font-family: var(--font-sans);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--tracking-label);
  color: var(--gold-500);
  opacity: 0.8;
}

.menu__aside {
  display: grid;
  gap: var(--s-6);
  align-content: start;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s-6);
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  justify-content: space-between;
  padding: var(--s-6) var(--gutter) var(--s-7);
  border-top: 1px solid color-mix(in srgb, var(--ivory-200) 12%, transparent);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory-200) 60%, transparent);
}

/* ==========================================================================
   08. BOTÕES & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--cacao-700);
  --btn-fg: var(--ivory-50);
  --btn-hover-bg: var(--ivory-50);
  --btn-hover-fg: var(--cacao-700);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.05rem 2.15rem;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--t-mid) var(--ease-soft),
    border-color var(--t-mid) var(--ease-soft),
    background-color var(--t-mid) var(--ease-soft);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-bg);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease-expo);
}

/* isolation + z-index:-1 escondia o ::before atrás do fundo opaco;
   no hover o fundo fica transparente para o deslize aparecer,
   e a cor do texto vem do token de contraste (nunca currentColor). */
.btn:hover,
.btn:focus-visible {
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-bg);
  background-color: transparent;
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-hover-bg: var(--fg);
  --btn-hover-fg: var(--bg);
  color: var(--btn-fg);
  border-color: color-mix(in srgb, var(--fg) 34%, transparent);
}

.btn--light {
  --btn-bg: var(--ivory-100);
  --btn-fg: var(--cacao-700);
  --btn-hover-bg: var(--cacao-700);
  --btn-hover-fg: var(--ivory-100);
}

.btn--block { width: 100%; }
.btn--sm { padding: 0.8rem 1.5rem; }

/* Link com sublinhado que percorre */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-bottom: 0.4rem;
  color: inherit;
}

.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--t-mid) var(--ease-expo);
}

.link:hover::after,
.link:focus-visible::after {
  animation: link-sweep 700ms var(--ease-expo);
}

@keyframes link-sweep {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

.link__arrow {
  width: 1rem;
  height: 1rem;
  transition: transform var(--t-mid) var(--ease-expo);
}

.link:hover .link__arrow { transform: translateX(0.3rem); }

.icon {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon--sm { width: 0.9rem; height: 0.9rem; }
.icon--lg { width: 1.6rem; height: 1.6rem; }

/* ==========================================================================
   09. SISTEMA DE REVELAÇÃO
   ========================================================================== */

[data-reveal] {
  --d: 0ms;
  transition-delay: var(--d);
}

/* Deslocamento vertical */
[data-reveal="up"] {
  opacity: 0;
  transform: translate3d(0, 2.25rem, 0);
  transition: opacity var(--t-slow) var(--ease-soft), transform var(--t-slow) var(--ease-expo);
  transition-delay: var(--d);
}

/* Máscara de linha (texto).
   padding-block libera acentos e descendentes (ex.: g de "fragrâncias")
   que o overflow:hidden cortaria com line-height apertado. */
[data-reveal="mask"] {
  overflow: hidden;
  display: block;
  padding-block: 0.12em 0.22em;
  margin-block: -0.12em -0.22em;
}
[data-reveal="mask"] > * {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--t-slow) var(--ease-expo);
  transition-delay: var(--d);
}

/* Imagem: cortina + escala.
   A cortina é um elemento sobreposto animado por transform — e nunca
   clip-path/opacity sobre a própria imagem. Motivo: um elemento totalmente
   recortado é tratado pelo Chrome como invisível, então ele não dispara o
   IntersectionObserver, não decodifica a imagem e chega a congelar a própria
   transição que iria revelá-la. Com transform, o pior caso possível é a
   cortina não sair — e a imagem continua lá, visível. */
[data-reveal="img"] { position: relative; isolation: isolate; }

[data-reveal="img"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  background: var(--bg-alt);
  transform-origin: bottom;
  transition: transform var(--t-cine) var(--ease-quart);
  transition-delay: var(--d);
}

[data-reveal="img"] > img,
[data-reveal="img"] > video,
[data-reveal="img"] > picture > img {
  transform: scale(1.1);
  transition: transform 2200ms var(--ease-expo);
  transition-delay: var(--d);
}

/* Linha que cresce */
[data-reveal="line"] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-quart);
  transition-delay: var(--d);
}

/* Letras / palavras (divididas por JS) */
[data-reveal="words"] .word { display: inline-block; overflow: hidden; vertical-align: top; }
[data-reveal="words"] .word > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0, 105%, 0);
  transition: transform 1000ms var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 42ms + var(--d));
}

.is-visible[data-reveal="up"] { opacity: 1; transform: none; }
.is-visible[data-reveal="mask"] > * { transform: none; }
.is-visible[data-reveal="img"]::before { transform: scaleY(0); }
.is-visible[data-reveal="img"] > img,
.is-visible[data-reveal="img"] > video,
.is-visible[data-reveal="img"] > picture > img { transform: scale(1); }
.is-visible[data-reveal="line"] { transform: scaleX(1); }
.is-visible[data-reveal="words"] .word > i { transform: none; }

/* Texto que acende palavra por palavra conforme o scroll */
.readout .word > i {
  color: var(--fg);
  opacity: 0.16;
  transition: opacity 420ms var(--ease-soft);
}
.readout .word.is-lit > i { opacity: 1; }

/* Parallax genérico (JS escreve --py) */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
}

/* ==========================================================================
   10. HERO
   ========================================================================== */

.hero {
  /* Tokens invertidos: botões ghost no hero precisam de --fg claro / --bg escuro */
  --bg: var(--noir);
  --bg-alt: var(--noir-soft);
  --fg: var(--ivory-200);
  --fg-muted: color-mix(in srgb, var(--ivory-200) 62%, transparent);
  --fg-subtle: color-mix(in srgb, var(--ivory-200) 42%, transparent);
  --accent: var(--gold-400);
  --line: color-mix(in srgb, var(--ivory-200) 18%, transparent);
  --line-soft: color-mix(in srgb, var(--ivory-200) 10%, transparent);
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

.hero__stage { z-index: 0; }

.hero__stage .stage__canvas,
.hero__stage .stage__media { transform: scale(1.02); }

.hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--nav-h) var(--gutter) clamp(2.5rem, 6vh, 5rem);
  display: grid;
  gap: var(--s-6);
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.hero__title {
  font-size: var(--fs-display-xl);
  line-height: 0.84;
  letter-spacing: -0.03em;
  margin-bottom: -0.06em;
}

.hero__title i {
  display: block;
  font-style: italic;
  font-size: 0.42em;
  letter-spacing: -0.01em;
  line-height: 1.1;
  padding-left: 0.12em;
  color: color-mix(in srgb, var(--ivory-100) 82%, transparent);
}

.hero__meta {
  display: grid;
  gap: var(--s-3);
  max-width: 34ch;
  padding-bottom: 0.6rem;
}

.hero__meta p {
  font-size: var(--fs-body);
  color: color-mix(in srgb, var(--ivory-100) 78%, transparent);
}

.hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--ivory-100) 20%, transparent);
  padding-top: var(--s-5);
}

.hero__cta { display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* Indicador de scroll */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-label-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory-100) 70%, transparent);
  background: none;
}

.scroll-cue__line {
  width: 1px;
  height: 3rem;
  background: color-mix(in srgb, var(--ivory-100) 30%, transparent);
  position: relative;
  overflow: hidden;
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivory-100);
  animation: cue-drop 2400ms var(--ease-soft) infinite;
}

@keyframes cue-drop {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* Controles de som/mídia do palco */
.stage-ctrl {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 6vh, 5rem);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ivory-100) 28%, transparent);
  border-radius: 999px;
  color: var(--ivory-100);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: background-color var(--t-fast) linear, border-color var(--t-fast) linear;
}

.stage-ctrl:hover { background: color-mix(in srgb, var(--ivory-100) 14%, transparent); }

/* ==========================================================================
   11. MARQUEE
   ========================================================================== */

.marquee {
  --speed: 46s;
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-block: 1px solid var(--line-soft);
  display: flex;
  user-select: none;
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-right: clamp(2rem, 5vw, 4.5rem);
  animation: marquee-run var(--speed) linear infinite;
  min-width: max-content;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 2.125rem);
  font-style: italic;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
  opacity: 0.55;
  flex: none;
}

@keyframes marquee-run {
  to { transform: translate3d(-100%, 0, 0); }
}

/* ==========================================================================
   12. MANIFESTO
   ========================================================================== */

.manifesto {
  position: relative;
  padding-block: clamp(6rem, 14vw, 14rem);
}

.manifesto__text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.2vw, 3.75rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  max-width: 30ch;
  margin-inline: auto;
  text-align: center;
}

.manifesto__text .accent { font-style: italic; color: var(--accent); }

.manifesto__sign {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* ==========================================================================
   13. FILME OLFATIVO
   ========================================================================== */

.cinema {
  position: relative;
  background: var(--noir);
  color: var(--ivory-200);
}

.cinema__track {
  position: relative;
  height: 340vh;
}

.cinema__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.cinema__stage { z-index: 0; }

.cinema__ui {
  position: relative;
  z-index: 5;
  height: 100%;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--s-6)) var(--gutter) clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-6);
}

.cinema__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.cinema__caption {
  align-self: end;
  max-width: 40ch;
  display: grid;
  gap: var(--s-4);
}

.cinema__chapter-name {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.cinema__chapter-name i { font-style: italic; }

.cinema__chapter-text {
  color: color-mix(in srgb, var(--ivory-200) 74%, transparent);
  font-size: var(--fs-body);
  max-width: 38ch;
}

/* transição suave do texto entre capítulos */
.cinema__caption > * {
  transition: opacity 520ms var(--ease-soft), transform 620ms var(--ease-expo);
}

.cinema__caption.is-swapping > * {
  opacity: 0;
  transform: translateY(0.9rem);
}

.cinema__foot {
  display: grid;
  gap: var(--s-4);
}

.cinema__chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 2rem);
  list-style: none;
  width: 100%;
}

.cinema__chapters > li {
  min-width: 0;
}

.cinema__chip {
  --chip-fg: color-mix(in srgb, var(--ivory-200) 55%, transparent);
  display: grid;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  text-align: left;
  color: var(--chip-fg);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--t-fast) linear;
}

.cinema__chip > span:last-child {
  line-height: 1.25;
}

.cinema__chip:hover { --chip-fg: var(--ivory-100); }

.cinema__chip[aria-current="true"] { --chip-fg: var(--ivory-100); }

.cinema__chip-bar {
  height: 1px;
  background: color-mix(in srgb, var(--ivory-200) 22%, transparent);
  position: relative;
  overflow: hidden;
}

.cinema__chip-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-400);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.cinema__chip-index {
  font-size: var(--fs-label-sm);
  letter-spacing: 0.2em;
  opacity: 0.6;
}

/* ==========================================================================
   14. COLEÇÃO
   ========================================================================== */

.collection__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.collection__title {
  max-width: 22ch;
  padding-inline: 0.02em; /* evita corte lateral de serifas no mask */
}

/* Galeria horizontal arrastável */
.rail {
  --rail-gap: clamp(1rem, 2.4vw, 2.25rem);
  /* 100vw: valor definido (evita % em filho max-content, que some no mobile) */
  --rail-pad: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  position: relative;
  cursor: grab;
}

.rail.is-dragging { cursor: grabbing; }

/* overflow-y: clip (e não hidden) evita que a roda do mouse fique presa
   na galeria: com "hidden" o navegador trata o eixo Y como rolável e a
   página para de rolar quando o cursor está sobre os cards. */
.rail__viewport {
  overflow-x: auto;
  overflow-y: clip;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rail-pad);
  -webkit-overflow-scrolling: touch;
}

.rail__viewport::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex;
  width: max-content;
  padding-bottom: var(--s-2);
}

/* Espaçadores reais no flex: garantem o recuo inicial (scrollLeft = 0)
   mesmo quando o scroll-snap tenta alinhar o card à borda. */
.rail__track::before,
.rail__track::after {
  content: "";
  flex: none;
  width: var(--rail-pad);
  pointer-events: none;
}

.rail__item {
  flex: none;
  width: clamp(15rem, 27vw, 25rem);
  scroll-snap-align: start;
}

.rail__item + .rail__item {
  margin-left: var(--rail-gap);
}

.rail__nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.rail__progress {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.rail__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 180ms linear;
}

.rail__btn {
  width: 2.9rem;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear, border-color var(--t-fast) linear;
}

.rail__btn:hover:not(:disabled) {
  background: var(--cacao-700);
  border-color: var(--cacao-700);
  color: var(--ivory-50);
}

.rail__btn:disabled { opacity: 0.3; cursor: default; }

/* Card de produto */
.card {
  display: grid;
  gap: var(--s-4);
  /* start (e não o stretch padrão) para que o texto não descole da imagem
     quando os cards da mesma linha têm alturas diferentes */
  align-content: start;
  text-decoration: none;
  color: inherit;
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--ivory-200);
  aspect-ratio: 3 / 4;
}

.card__media img,
.card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-expo), opacity var(--t-mid) var(--ease-soft);
}

.card:hover .card__media img { transform: scale(1.06); }

.card__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.card:hover .card__media video.is-ready { opacity: 1; }

.card__tag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 2;
  padding: 0.4rem 0.75rem;
  background: color-mix(in srgb, var(--ivory-50) 92%, transparent);
  color: var(--cacao-700);
  font-size: var(--fs-label-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.card__reveal {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--ivory-50);
  background: linear-gradient(to top, rgba(20, 16, 13, 0.72), transparent);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-expo);
}

.card:hover .card__reveal,
.card:focus-visible .card__reveal { opacity: 1; transform: none; }

.card__body {
  display: grid;
  gap: 0.4rem;
}

.card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.1;
}

.card__price {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  white-space: nowrap;
}

.card__notes {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* ==========================================================================
   15. PIRÂMIDE OLFATIVA
   ========================================================================== */

.pyramid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.pyramid__viz {
  position: relative;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.pyramid__tier {
  --w: 100%;
  width: var(--w);
  padding: clamp(1rem, 2.2vw, 1.75rem) clamp(1rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-alt) 60%, transparent);
  text-align: left;
  transition: background-color var(--t-mid) var(--ease-soft),
              border-color var(--t-mid) linear,
              color var(--t-mid) linear,
              transform var(--t-mid) var(--ease-expo);
}

.pyramid__tier:nth-child(1) { --w: 62%; }
.pyramid__tier:nth-child(2) { --w: 81%; }
.pyramid__tier:nth-child(3) { --w: 100%; }

.pyramid__tier:hover { transform: translateX(0.35rem); }

.pyramid__tier[aria-selected="true"] {
  background: var(--cacao-700);
  border-color: var(--cacao-700);
  color: var(--ivory-50);
}

.pyramid__tier-label {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
}

.pyramid__tier-name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1;
  white-space: nowrap;
}

.pyramid__panel {
  display: grid;
  gap: var(--s-5);
  align-content: center;
  min-height: 18rem;
}

.pyramid__panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: 1;
}

.pyramid__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
}

.pyramid__notes li {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  opacity: 0;
  transform: translateY(0.5rem);
  animation: chip-in 640ms var(--ease-expo) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes chip-in {
  to { opacity: 1; transform: none; }
}

.pyramid__panel.is-swapping > * { opacity: 0; transition: opacity 200ms linear; }

/* ==========================================================================
   16. ATELIER
   ========================================================================== */

.atelier {
  position: relative;
  overflow: hidden;
}

.atelier__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.5rem);
  align-items: center;
}

.atelier__copy {
  grid-column: 1 / span 5;
  display: grid;
  gap: var(--s-5);
}

.atelier__media-a { grid-column: 7 / span 6; }
.atelier__media-b { grid-column: 2 / span 4; margin-top: clamp(2rem, 6vw, 7rem); }
.atelier__media-c { grid-column: 7 / span 5; margin-top: clamp(-6rem, -6vw, -2rem); }

.atelier__caption {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--fg-subtle);
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
}

.atelier__caption::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--line);
  flex: none;
  transform: translateY(-0.35em);
}

/* Passos do processo */
.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--line-soft);
}

.steps__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 20ch) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--t-mid) var(--ease-soft);
}

.steps__item:hover { background: color-mix(in srgb, var(--bg-alt) 70%, transparent); }

.steps__num {
  font-size: var(--fs-label-sm);
  letter-spacing: 0.2em;
  color: var(--accent);
}

.steps__num::before { content: "0" counter(step); }

.steps__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.05;
}

.steps__text { color: var(--fg-muted); max-width: 52ch; }

/* ==========================================================================
   17. PERFUME BAR
   ========================================================================== */

.bar {
  position: relative;
  overflow: hidden;
  color: var(--ivory-200);
  background: var(--noir);
  isolation: isolate;
}

.bar__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bar__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.85);
}

.bar__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.bar__copy { display: grid; gap: var(--s-5); max-width: 34ch; }

.bar__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--ivory-200) 20%, transparent);
  padding-top: var(--s-6);
}

.bar__stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--ivory-100);
}

.bar__stat-label {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory-200) 58%, transparent);
  margin-top: var(--s-2);
}

.bar__list {
  display: grid;
  gap: var(--s-4);
  list-style: none;
}

.bar__list li {
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid color-mix(in srgb, var(--ivory-200) 12%, transparent);
  color: color-mix(in srgb, var(--ivory-200) 80%, transparent);
}

.bar__list svg { color: var(--gold-400); margin-top: 0.25rem; }

/* ==========================================================================
   18. ASSINATURA (QUIZ)
   ========================================================================== */

.quiz {
  position: relative;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-alt) 55%, transparent);
  padding: clamp(1.75rem, 4.5vw, 4.5rem);
  overflow: hidden;
}

.quiz__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.quiz__progress {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.quiz__dot {
  width: 2rem;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.quiz__dot.is-done::after,
.quiz__dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: quiz-fill 620ms var(--ease-quart) forwards;
  transform-origin: left;
}

@keyframes quiz-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.quiz__step { display: none; }
.quiz__step.is-active { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.quiz__question {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: 1.02;
  max-width: 26ch;
}

.quiz__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-4);
}

.quiz__option {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  background: var(--bg);
  text-align: left;
  display: grid;
  gap: var(--s-2);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-mid) var(--ease-soft), border-color var(--t-mid) linear;
}

.quiz__option::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cacao-700);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease-expo);
}

.quiz__option:hover,
.quiz__option:focus-visible {
  color: var(--ivory-50);
  border-color: var(--cacao-700);
  background-color: transparent;
}
.quiz__option:hover::before,
.quiz__option:focus-visible::before { transform: translateY(0); }

.quiz__option-name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.1;
}

.quiz__option-desc {
  font-size: var(--fs-small);
  opacity: 0.72;
}

.quiz__result {
  display: none;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.quiz__result.is-active { display: grid; }

.quiz__result-body { display: grid; gap: var(--s-5); }

/* ==========================================================================
   19. NEWSLETTER & RODAPÉ
   ========================================================================== */

.news {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.news__form {
  display: flex;
  gap: 0;
  max-width: 34rem;
  margin-inline: auto;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.field {
  flex: 1;
  background: none;
  border: 0;
  padding: 1rem 0.25rem;
  font-size: var(--fs-body);
  color: var(--fg);
}

.field::placeholder { color: var(--fg-subtle); }
.field:focus { outline: none; }
.news__form:focus-within { border-color: var(--accent); }

.news__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.25rem 0.75rem 1rem;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.form-note {
  font-size: var(--fs-small);
  color: var(--fg-subtle);
  margin-top: var(--s-4);
}

.form-status {
  font-size: var(--fs-small);
  color: var(--accent);
  min-height: 1.5em;
}

.footer {
  background: var(--noir);
  color: var(--ivory-200);
  padding-top: clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.footer__brand { display: grid; gap: var(--s-5); align-content: start; }

/* Para quando chegar o logotipo com fundo transparente */
.footer__logo {
  width: clamp(7rem, 11vw, 9.5rem);
  height: auto;
}

.footer__col-title {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory-200) 52%, transparent);
  margin-bottom: var(--s-5);
}

.footer__list { list-style: none; display: grid; gap: var(--s-3); }

.footer__list a {
  text-decoration: none;
  color: color-mix(in srgb, var(--ivory-200) 86%, transparent);
  transition: color var(--t-fast) linear;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.footer__list a:hover { color: var(--gold-400); }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(4rem, 19vw, 20rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--ivory-200) 12%, transparent);
  text-align: center;
  user-select: none;
  margin-bottom: -0.14em;
  padding-top: var(--s-6);
}

.footer__legal {
  border-top: 1px solid color-mix(in srgb, var(--ivory-200) 12%, transparent);
  padding-block: var(--s-5) var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  justify-content: space-between;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ivory-200) 46%, transparent);
}

.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--gold-400); }

/* Botão flutuante de WhatsApp */
.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 96;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.35rem;
  background: var(--cacao-700);
  color: var(--ivory-50);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(1.5rem) scale(0.96);
  transition: opacity var(--t-mid) var(--ease-soft), transform var(--t-mid) var(--ease-expo), background-color var(--t-fast) linear;
}

.wa.is-in { opacity: 1; transform: none; }
.wa:hover { background: var(--ink-900); }
.wa span { display: none; }

@media (min-width: 40rem) {
  .wa span { display: inline; }
}

/* ==========================================================================
   20. PÁGINAS INTERNAS
   ========================================================================== */

/* Cabeçalho editorial de página */
.pagehead {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 9vw, 8rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}

.pagehead--noir {
  --bg: var(--noir);
  --bg-alt: var(--noir-soft);
  --fg: var(--ivory-200);
  --fg-muted: color-mix(in srgb, var(--ivory-200) 62%, transparent);
  --fg-subtle: color-mix(in srgb, var(--ivory-200) 42%, transparent);
  --accent: var(--gold-400);
  --line: color-mix(in srgb, var(--ivory-200) 18%, transparent);
  --line-soft: color-mix(in srgb, var(--ivory-200) 10%, transparent);
  color: var(--fg);
  background: var(--bg);
}

.pagehead__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-6);
}

.pagehead__title {
  font-size: var(--fs-display-l);
  line-height: 0.9;
}

.pagehead__title i { font-style: italic; display: block; font-size: 0.44em; padding-left: 0.1em; }

.pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pagehead__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.crumbs {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  list-style: none;
  flex-wrap: wrap;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.6rem; opacity: 0.5; }

/* Filtros da coleção */
.filters {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
  border-block: 1px solid var(--line-soft);
  padding-block: var(--s-4);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  position: sticky;
  top: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  z-index: 20;
}

.filters__group { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }

.chip {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--t-fast) linear, background-color var(--t-fast) linear, border-color var(--t-fast) linear;
}

.chip:hover { color: var(--fg); border-color: color-mix(in srgb, var(--cacao-700) 40%, transparent); }

.chip[aria-pressed="true"] {
  background: var(--cacao-700);
  border-color: var(--cacao-700);
  color: var(--ivory-50);
}

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2.4vw, 2.25rem);
}

.grid-products .card.is-out {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  transition: opacity 320ms var(--ease-soft), transform 320ms var(--ease-expo);
}

.empty-note {
  padding: var(--s-8) 0;
  text-align: center;
  color: var(--fg-subtle);
}

/* Produto */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3.5rem));
}

.product__gallery { display: grid; gap: var(--s-4); position: relative; }

.product__main {
  position: relative;
  overflow: hidden;
  background: var(--ivory-200);
  aspect-ratio: 4 / 5;
}

.product__main img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--t-mid) var(--ease-soft), transform 1600ms var(--ease-expo);
}

.product__thumbs {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.product__thumb {
  width: clamp(3.5rem, 6vw, 5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid transparent;
  padding: 0;
  background: var(--ivory-200);
  transition: border-color var(--t-fast) linear, opacity var(--t-fast) linear;
  opacity: 0.6;
}

.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb:hover { opacity: 1; }
.product__thumb[aria-current="true"] { border-color: var(--accent); opacity: 1; }

.product__info {
  display: grid;
  gap: var(--s-6);
  position: sticky;
  top: calc(var(--nav-h) + var(--s-6));
}

.product__title { font-size: var(--fs-display-m); line-height: 0.95; }

.product__price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--fg);
}

.product__price small {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
  text-transform: uppercase;
  margin-left: 0.5rem;
}

.product__actions { display: grid; gap: var(--s-3); }

.spec {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-body);
}

.spec__key {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding-top: 0.15em;
}

.accordion { border-top: 1px solid var(--line-soft); }

.accordion__item { border-bottom: 1px solid var(--line-soft); }

.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  text-align: left;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.accordion__icon {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--t-mid) var(--ease-expo), opacity var(--t-fast) linear;
}

.accordion__icon::before { top: 50%; left: 0; width: 100%; height: 1px; }
.accordion__icon::after { left: 50%; top: 0; height: 100%; width: 1px; }

.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); }

.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--t-mid) var(--ease-quart);
}

.accordion__panel-inner {
  padding-bottom: var(--s-5);
  color: var(--fg-muted);
  max-width: 52ch;
}

/* Contato */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.form {
  display: grid;
  gap: var(--s-5);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-5);
}

.form__field { display: grid; gap: 0.4rem; }

.form__label {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0;
  color: var(--fg);
  transition: border-color var(--t-fast) linear;
  border-radius: 0;
}

.form__select { appearance: none; background-image: none; cursor: pointer; }

.form__textarea { resize: vertical; min-height: 6rem; }

.form__input:focus,
.form__select:focus,
.form__textarea:focus { outline: none; border-color: var(--accent); }

/* Cartões de informação */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

.info-card {
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: var(--s-3);
  align-content: start;
  background: color-mix(in srgb, var(--bg-alt) 45%, transparent);
  transition: transform var(--t-mid) var(--ease-expo), border-color var(--t-mid) linear;
}

.info-card:hover { transform: translateY(-0.35rem); border-color: color-mix(in srgb, var(--cacao-700) 35%, transparent); }

.info-card svg { color: var(--accent); }

/* Editorial em duas colunas */
.editorial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  line-height: 1.24;
  max-width: 30ch;
}

.quote__cite {
  display: block;
  margin-top: var(--s-5);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* Faixa de imagens (galeria de eventos) */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.strip .frame { aspect-ratio: 1; }

/* ==========================================================================
   21. RESPONSIVO & PREFERÊNCIAS
   ========================================================================== */

@media (max-width: 74rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atelier__copy { grid-column: 1 / span 6; }
  .atelier__media-a { grid-column: 7 / span 6; }
  .atelier__media-b { grid-column: 1 / span 6; }
  .atelier__media-c { grid-column: 7 / span 6; margin-top: 0; }
}

@media (max-width: 62rem) {
  .nav__links--start { display: none; }
  .nav__links--end .nav__link:not(.nav__link--keep) { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__inner { grid-template-columns: 1fr auto 1fr; }

  .menu__body { grid-template-columns: 1fr; }

  .pyramid { grid-template-columns: 1fr; }
  .pyramid__panel { min-height: 0; }

  /* Primeiro degrau mais largo para “Notas de topo” caber em uma linha */
  .pyramid__tier {
    padding-inline: 1rem;
    gap: 0.75rem;
  }
  .pyramid__tier:nth-child(1) { --w: 84%; }
  .pyramid__tier:nth-child(2) { --w: 92%; }
  .pyramid__tier-label {
    letter-spacing: 0.14em;
    font-size: var(--fs-label-sm);
  }

  .bar__inner { grid-template-columns: 1fr; }

  .product { grid-template-columns: 1fr; }
  .product__info { position: static; }

  .contact { grid-template-columns: 1fr; }

  .quiz__result { grid-template-columns: 1fr; }

  .cinema__track { height: 300vh; }
}

@media (max-width: 48rem) {
  :root {
    --nav-h: 4.25rem;
    --gutter: clamp(1.5rem, 5.5vw, 2rem);
  }

  .hero__top { align-items: flex-start; flex-direction: column; }
  .hero__meta { padding-bottom: 0; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .scroll-cue { display: none; }
  .stage-ctrl { bottom: auto; top: calc(var(--nav-h) + 0.75rem); right: var(--gutter); }

  .steps__item { grid-template-columns: auto 1fr; }
  .steps__text { grid-column: 2; }

  .footer__grid { grid-template-columns: 1fr; }

  .atelier__grid { grid-template-columns: 1fr; }
  .atelier__copy,
  .atelier__media-a,
  .atelier__media-b,
  .atelier__media-c { grid-column: 1 / -1; margin-top: 0; }

  .filters { position: static; }

  .spec__row { grid-template-columns: 1fr; gap: var(--s-2); }

  .rail__item { width: clamp(14.5rem, 72vw, 22rem); }
}

/* Telas muito largas: mais respiro tipográfico */
@media (min-width: 110rem) {
  :root { --fs-display-xl: 12rem; }
}

@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;
  }

  .grain,
  .mist,
  .rays { animation: none; }

  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="mask"] > *,
  [data-reveal="words"] .word > i { transform: none !important; }
  [data-reveal="img"] > img,
  [data-reveal="img"] > video { transform: none !important; clip-path: none !important; }
  [data-reveal="img"]::before { display: none; }
  .readout .word > i { opacity: 1 !important; }

  .overture { display: none; }
  .cinema__track { height: auto; }
  .cinema__pin { position: relative; height: auto; min-height: 100svh; }
}

@media print {
  .nav, .menu, .grain, .wa, .overture, .curtain { display: none !important; }
  body { background: #fff; color: #000; }
}