/* ════════════════════════════════════════════════════════════
   O BONSAI — Estilos da landing page
   Tokens, tipografia e seções (Hero · História · Acervo)
   Fontes: Shippori Mincho B1 (display) + Montserrat (texto)
   ════════════════════════════════════════════════════════════ */

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

:root {
  --black:       #010101;
  --crimson:     #9B0E22;
  --crimson-btn: #B81228;
  --cream:       rgb(244, 241, 236);
  --cream-soft:  rgba(244, 241, 236, 0.9);
  --cream-muted: rgba(244, 241, 236, 0.7);
  --cream-ghost: rgba(244, 241, 236, 0.28);
  --font-display: 'Shippori Mincho B1', serif;
  --font-body:    'Montserrat', sans-serif;
  --gutter: 40px;
}

html {
  scroll-behavior: auto;
  scrollbar-width: thin;                         /* Firefox */
  scrollbar-color: var(--cream-soft) transparent;
}
body  { background: var(--black); overflow-x: hidden; }

/* Cute floating scrollbar — cream pill on a transparent track */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--cream-soft);
  border-radius: 999px;
  border: 3px solid transparent;                 /* inset → slim ~4px pill that floats */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--cream); }

/* ── Cinematic reveal: fade + blur + rise, staggered ──────── */
.reveal-item {
  opacity: 0;
  filter: blur(11px);
  transform: translateY(22px);
  transition:
    opacity   1s ease,
    filter    1s ease,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal .reveal-item,
.reveal-item.reveal {           /* descendant OR self-revealing element */
  opacity: 1;
  filter: blur(0);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-item { opacity: 1; filter: none; transform: none; transition: none; }
  .card__img img { opacity: 1; filter: none; transform: none; transition: none; }
  .acervo__rule { transform: none; transition: none; }
  .loader__brand, .loader__welcome { opacity: 1; filter: none; transform: none; }
  .pine { opacity: 0.16; transform: scaleX(var(--flip, 1)); transition: none; }
  .artista-step__dot { opacity: 1; transform: scale(1); transition: none; }
  .review { opacity: 1; filter: none; transform: none; transition: none; }
  .rk { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════
   INTRO LOADER — welcome screen (buys time for assets)
═══════════════════════════════════════════════════ */
body.is-loading { overflow: hidden; }

.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--black);
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__brand {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 6vw, 64px); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cream);
  opacity: 0; filter: blur(10px); transform: translateY(12px);
  transition: opacity 1s ease, filter 1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.loader__welcome {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--cream-muted);
  margin-top: 22px;
  opacity: 0; filter: blur(8px); transform: translateY(10px);
  transition: opacity 1s ease 0.25s, filter 1s ease 0.25s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.loader__bar {
  width: 120px; height: 1px; margin-top: 32px;
  background: rgba(244, 241, 236, 0.14); overflow: hidden;
}
.loader__bar > span {
  display: block; width: 100%; height: 100%;
  background: var(--crimson-btn); transform: scaleX(0); transform-origin: left;
}
.loader.is-active .loader__brand,
.loader.is-active .loader__welcome { opacity: 1; filter: blur(0); transform: none; }
.loader.is-active .loader__bar > span {
  animation: loaderFill 2s cubic-bezier(0.45, 0, 0.2, 1) forwards 0.2s;
}
@keyframes loaderFill { to { transform: scaleX(1); } }

/* ═══════════════════════════════════════════════════
   SECTION 1 — HERO  (sticky; folds below slide over it)
═══════════════════════════════════════════════════ */
.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img,
.hero__bg video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(0.70) brightness(0.30);   /* noir — a touch of color, exposure down */
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(1,1,1,0.55) 0%, rgba(1,1,1,0) 30%),
    linear-gradient(0deg,   rgba(1,1,1,0.62) 0%, rgba(1,1,1,0) 46%),
    radial-gradient(ellipse 90% 80% at 50% 46%, transparent 0%, rgba(1,1,1,0.50) 100%);
}

/* subtle hero seams (thin lines over the photo) */
.hero__seams { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__seams span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.045); }
.hero__seams span:nth-child(1){ left: 25%; }
.hero__seams span:nth-child(2){ left: 50%; }
.hero__seams span:nth-child(3){ left: 75%; }

.hero__shell {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; height: 100%;
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--gutter); flex-shrink: 0;
}
.nav__burger {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 32px; cursor: pointer; background: none; border: none; padding: 0;
}
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--cream); }
.nav__logo {
  font-family: var(--font-display); font-weight: 400; font-size: 18px;
  letter-spacing: 0.22em; color: var(--cream); text-transform: uppercase;
  text-decoration: none; position: absolute; left: 50%; transform: translateX(-50%);
}
.nav__cart {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; background: none; border: none; color: var(--cream); padding: 0;
}
.nav__cart svg { width: 21px; height: 21px; }
.nav__cart-count { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--cream); }

/* main area: text block on the left, Rodin quote anchored bottom-right */
.hero__main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter) 64px;
}
.hero__content { max-width: 700px; }
.hero__label {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson);
  margin-bottom: 22px; display: block;
}
.hero__heading {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 6.8vw, 88px); line-height: 1.04;
  letter-spacing: -0.01em; color: var(--cream); margin: 0 0 30px;
}
.hero__intro {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7;
  color: var(--cream-muted); max-width: 460px; margin-bottom: 40px;
}
.hero__actions { display: flex; align-items: center; gap: 16px; }

.hero__quote {
  position: absolute; right: var(--gutter); bottom: 64px;
  max-width: 300px; font-style: normal;
}
.hero__quote-text {
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  line-height: 1.7; color: var(--cream-muted); margin-bottom: 16px;
}
.hero__quote-author { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--cream); }

.btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.03em;
  padding: 18px 34px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; white-space: nowrap;
  transition: background 0.25s cubic-bezier(0.42,0,0.58,1), transform 0.25s cubic-bezier(0.42,0,0.58,1);
}
.btn--primary   { background: var(--crimson); color: var(--cream); }
.btn--primary:hover   { background: var(--crimson-btn); transform: scale(1.04); }
.btn--secondary { background: var(--cream); color: var(--black); }
.btn--secondary:hover { transform: scale(1.04); }

/* ═══════════════════════════════════════════════════
   SECTION 2 — STORY  (pinned: read → compose → wipe to black)
   The black lines live tight on the RIGHT and become the curtain.
═══════════════════════════════════════════════════ */
.story {
  position: relative;
  z-index: 2;
  height: 260vh;                 /* scroll space: read → hold philosophy → wipe */
  background: var(--black);      /* nothing red leaks once the wipe is done */
}
.story__stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: var(--crimson);
  display: flex; align-items: center;
  padding: 0 var(--gutter);
}

/* readable about content — left-biased, never under the right lines */
.story__content {
  position: relative; z-index: 1;
  width: 66%;
  display: grid;
  grid-template-columns: clamp(240px, 24vw, 340px) 1fr;
  gap: 72px;
  align-items: start;
  will-change: opacity, transform;
}
.story__left { display: flex; flex-direction: column; align-items: flex-start; }
.story__eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,241,236,0.8);
  margin-bottom: 18px;
}
.story__rule-sm { width: 32px; height: 1px; background: rgba(244,241,236,0.4); margin-bottom: 28px; }
.story__heading {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--cream); margin-bottom: 28px;
}
.story__meta {
  font-family: var(--font-body); font-weight: 400; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-ghost);
}
.story__right { display: flex; flex-direction: column; }
.story__lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: var(--cream-soft); margin-bottom: 26px;
}
.story__divider { width: 100%; height: 1px; background: rgba(244,241,236,0.1); margin-bottom: 26px; }
.story__body {
  font-family: var(--font-body); font-size: 15px; font-weight: 400;
  line-height: 1.8; color: var(--cream-muted); margin-bottom: 16px;
}
.story__body:last-child { margin-bottom: 0; }

/* crisp resting hairlines — clustered on the right */
.story__seams { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: opacity; }
.story__seams span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(1,1,1,0.45); }
.story__seams span:nth-child(1){ left: 75%; }
.story__seams span:nth-child(2){ left: 78.5%; }
.story__seams span:nth-child(3){ left: 82%; }
.story__seams span:nth-child(4){ left: 85.5%; }
.story__seams span:nth-child(5){ left: 89%; }

/* interstitial statement — bottom-left, appears during the wipe */
.story__tagline {
  position: absolute; left: var(--gutter); bottom: 64px; z-index: 2;
  max-width: 520px; opacity: 0; will-change: opacity, transform;
}
.story__tagline::before {
  content: ''; display: block; width: 32px; height: 1px;
  background: rgba(244,241,236,0.5); margin-bottom: 22px;
}
.story__tagline-kicker {
  display: block; font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-soft); margin-bottom: 16px;
}
.story__tagline-text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.35; letter-spacing: 0.01em; color: var(--cream);
}

/* growing black bars — expand from the right cluster and tile the screen */
.story__bars { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.story__bars > i {
  position: absolute; top: 0; bottom: 0; width: 0; left: 75%;
  background: var(--black); display: block; will-change: left, width;
}

/* ═══════════════════════════════════════════════════
   SECTION 3 — ACERVO  (revealed after the wipe)
═══════════════════════════════════════════════════ */
.acervo {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  background: var(--black);
  padding: 120px var(--gutter) 130px;
}
.acervo__inner { position: relative; z-index: 1; }
.acervo__eyebrow {
  font-family: var(--font-display); font-weight: 400; font-size: 13px;
  letter-spacing: 0.3em; color: var(--crimson-btn); margin-bottom: 18px;
}
.acervo__rule {
  width: 100%; height: 1px; background: rgba(184,18,40,0.55); margin-bottom: 40px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal .acervo__rule { transform: scaleX(1); }   /* traced from left to right */
.acervo__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 72px;
}
.acervo__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 7vw, 100px); line-height: 0.98;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.acervo__title-light  { color: var(--cream); }
.acervo__title-accent { color: var(--crimson-btn); }
.acervo__cta {
  font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--cream); text-decoration: none;
  padding: 16px 28px; border: 1px solid rgba(244,241,236,0.3); white-space: nowrap;
  transition: background 0.25s cubic-bezier(0.42,0,0.58,1), color 0.25s, border-color 0.25s;
}
.acervo__cta:hover { background: var(--cream); color: var(--black); border-color: var(--cream); }

.acervo__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: inherit; }
.card__link {
  margin-top: 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--crimson-btn);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card:hover .card__link { opacity: 1; transform: translateX(0); }
.card__img {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: #0b0a0b;
  margin-bottom: 18px;
  border: 1px solid rgba(244, 241, 236, 0.14);   /* fine hairline frame */
  transition: border-color 0.3s ease;
}
.card:hover .card__img { border-color: rgba(244, 241, 236, 0.32); }
.card__img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  /* cinematic reveal: develops in with fade + blur + slight zoom-out */
  opacity: 0; filter: blur(14px); transform: scale(1.06);
  transition: opacity 1s ease, filter 1s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal .card__img img.is-ready { opacity: 1; filter: blur(0); transform: scale(1); }
.card:hover .card__img img.is-ready { transform: scale(1.04); filter: brightness(1.08); }

.card__body { display: flex; flex-direction: column; align-items: flex-start; }
.card__tag {
  align-self: flex-start; font-family: var(--font-body);
  font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream); background: var(--crimson); padding: 5px 10px; margin-bottom: 14px;
}
.card__name {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  color: var(--cream); margin-bottom: 8px;
}
.card__row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
.card__meta  { font-family: var(--font-body); font-size: 12px; color: rgba(244,241,236,0.5); }
.card__price { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--crimson-btn); }

/* ═══════════════════════════════════════════════════
   SECTION 4 — O ARTISTA
   Title entrance (black → red panel rises) + trajectory timeline
═══════════════════════════════════════════════════ */

/* ── Entrance: "O ARTISTA" on black, red panel rises to cover ── */
.artista-intro {
  position: relative;
  z-index: 5;
  height: 150vh;                 /* scroll space for the reveal + rise */
  background: var(--black);
}
.artista-intro__stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
}
.artista-intro__title {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(52px, 12vw, 168px); line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--crimson-btn);
  will-change: transform, opacity;
}
/* red panel grows from a bottom-centred box out to fullscreen */
.artista-intro__panel {
  position: absolute; inset: 0;
  background: var(--crimson);
  transform-origin: bottom center;
  transform: scaleX(0.5) scaleY(0);
  will-change: transform;
  z-index: 2;
}

/* ── Timeline (red surface) ──────────────────────────────────── */
.artista-timeline {
  position: relative;
  z-index: 5;
  background: var(--crimson);
  padding: 0 var(--gutter) 120px;
  overflow: hidden;
}

/* tone-on-tone pine branches — fade + grow in on scroll */
.pine {
  position: absolute; z-index: 0; pointer-events: none; height: auto;
  opacity: 0;
  transform: translateY(36px) scale(0.9) scaleX(var(--flip, 1)) rotate(var(--r, 0deg));
  transition: opacity 1.2s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.pine.is-in {
  opacity: 0.16;
  transform: translateY(0) scale(1) scaleX(var(--flip, 1)) rotate(var(--r, 0deg));
}
/* each branch bleeds its cut base off the edge — only foliage enters the frame */
.pine--1 { width: clamp(360px, 40vw, 640px); top: -24px;    left: -210px;  --r: -2deg; }            /* base off the left   */
.pine--2 { width: clamp(260px, 28vw, 460px); top: 42%;      right: -64px;  --flip: -1; }            /* base off the right (kept) */
.pine--3 { width: clamp(360px, 38vw, 600px); bottom: 56px;  left: -200px;  --flip: -1; --r: 1deg; } /* flipped → base off the left */

/* timeline milestone dots — pop in when the line reaches them */
.artista-step__dot {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: var(--cream);
  box-shadow: 0 0 0 6px rgba(155, 14, 34, 0.55);   /* crimson halo to seat it on the red */
  opacity: 0; transform: scale(0);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.artista-step.is-marked .artista-step__dot { opacity: 1; transform: scale(1); }

/* portrait + intro */
.artista-portrait-block {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 380px) 1fr;
  gap: 64px; align-items: center;
  max-width: 1100px; margin: 0 auto;
  padding: 88px 0 120px;
}
.artista-portrait {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid rgba(244, 241, 236, 0.28);
  background: linear-gradient(160deg, #2a0810 0%, #0b0a0b 90%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.artista-portrait__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.artista-portrait__kanji {
  font-family: var(--font-display); font-weight: 700; font-size: 96px; line-height: 1;
  color: rgba(244, 241, 236, 0.12);
}
.artista-portrait__cap {
  font-family: var(--font-body); font-weight: 500; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 241, 236, 0.4);
}
.artista-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 241, 236, 0.7);
  margin-bottom: 18px;
}
.artista-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--cream); margin-bottom: 26px;
}
.artista-lead {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55;
  color: var(--cream-soft); max-width: 520px;
}

/* steps with central spine */
.artista-steps { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.artista-steps__line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: rgba(244, 241, 236, 0.5);
  transform: translateX(-0.5px) scaleY(0);     /* drawn downward as you scroll (JS) */
  transform-origin: top center;
  will-change: transform;
}
.artista-step {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 110px;
  align-items: center; min-height: 78vh;
}
.artista-step__head { display: flex; flex-direction: column; max-width: 420px; }
.artista-step__kanji {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  color: rgba(244, 241, 236, 0.6); margin-bottom: 10px;
}
.artista-step__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4.2vw, 58px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--cream);
}
.artista-step__desc {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.75;
  color: var(--cream-soft); max-width: 420px;
}
/* odd steps — title hugs the line on the left, desc on the right */
.artista-step.is-right .artista-step__head { grid-column: 1; justify-self: end; align-items: flex-end; text-align: right; }
.artista-step.is-right .artista-step__desc { grid-column: 2; justify-self: start; }
/* even steps — desc on the left, title hugs the line on the right */
.artista-step.is-left .artista-step__head { grid-column: 2; justify-self: start; align-items: flex-start; text-align: left; }
.artista-step.is-left .artista-step__desc { grid-column: 1; justify-self: end; text-align: right; }

.artista-closing {
  position: relative; z-index: 1;
  text-align: center; margin-top: 40px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px); color: rgba(244, 241, 236, 0.75);
}

/* ═══════════════════════════════════════════════════
   SECTION 5 — LOJA / PARA COMEÇAR  (entry-level catalogue)
   Interactive list → detail panel (sliding indicator + crossfade)
═══════════════════════════════════════════════════ */
.loja {
  position: relative;
  z-index: 6;
  background: var(--black);   /* clean hard cut from the red artista fold */
  padding: 150px var(--gutter) 150px;
  overflow: hidden;
}

.loja__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

.loja__eyebrow {
  font-family: var(--font-display); font-weight: 400; font-size: 13px;
  letter-spacing: 0.3em; color: var(--crimson-btn); margin-bottom: 20px;
}
.loja__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(36px, 5.4vw, 76px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--cream); margin-bottom: 26px;
}
.loja__title em { font-style: italic; color: var(--crimson-btn); }
.loja__lead {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7;
  color: var(--cream-muted); max-width: 560px; margin-bottom: 64px;
}

/* two options side by side */
.loja__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.loja__card { display: flex; flex-direction: column; }
.loja__card-media {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden;
  border: 1px solid rgba(244, 241, 236, 0.16);
  background: radial-gradient(120% 120% at 70% 20%, rgba(155, 14, 34, 0.4), transparent 55%), linear-gradient(160deg, #1c1014 0%, #0a090a 80%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  transition: border-color 0.35s ease;
}
.loja__card:hover .loja__card-media { border-color: rgba(244, 241, 236, 0.34); }
.loja__card-kanji {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(90px, 12vw, 180px); line-height: 1;
  color: rgba(244, 241, 236, 0.14); user-select: none;
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.loja__card:hover .loja__card-kanji { color: rgba(244, 241, 236, 0.22); transform: scale(1.04); }
.loja__card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1;
  color: var(--cream); margin-bottom: 14px;
}
.loja__card-desc {
  font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.75;
  color: var(--cream-muted); margin-bottom: 28px; max-width: 460px;
}
.loja__card-foot { margin-top: auto; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.loja__card-price {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; color: var(--crimson-btn);
}

.loja__cta {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.03em;
  padding: 16px 32px; background: var(--crimson); color: var(--cream); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  transition: background 0.25s cubic-bezier(0.42,0,0.58,1), transform 0.25s cubic-bezier(0.42,0,0.58,1);
}
.loja__cta:hover { background: var(--crimson-btn); transform: scale(1.04); }

/* ═══════════════════════════════════════════════════
   SECTION 6 — CONSULTORIA  (bento · tema claro / creme)
   Mesmo design system, invertido: fundo creme, tinta escura,
   acentos crimson. Placeholders de mídia trocáveis por fotos.
═══════════════════════════════════════════════════ */
.consultoria {
  position: relative;
  z-index: 7;
  background: var(--cream);     /* corte limpo do preto da Loja para o creme */
  padding: 150px var(--gutter) 150px;
  overflow: hidden;

  /* tinta escura sobre creme (tokens locais da dobra clara) */
  --ink:       #1a1614;
  --ink-soft:  rgba(26, 22, 20, 0.74);
  --ink-muted: rgba(26, 22, 20, 0.56);
  --ink-ghost: rgba(26, 22, 20, 0.34);
  --line:      rgba(26, 22, 20, 0.10);
  --card:      #fbf9f5;
  --card-warm: linear-gradient(160deg, #f4eee4 0%, #ece2d4 90%);
}

.consultoria__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

.consultoria__eyebrow {
  font-family: var(--font-display); font-weight: 400; font-size: 13px;
  letter-spacing: 0.3em; color: var(--crimson-btn); margin-bottom: 20px;
}
.consultoria__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(36px, 5.4vw, 76px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 26px;
}
.consultoria__title em { font-style: italic; color: var(--crimson-btn); }
.consultoria__lead {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7;
  color: var(--ink-muted); max-width: 620px; margin-bottom: 64px;
}

/* ── Grade bento ─────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(176px, auto);
  gap: 20px;
  grid-template-areas:
    "consult consult consult consult cursos  cursos"
    "consult consult consult consult insumos insumos"
    "cta     cta     cta     trust   trust   trust";
}
.bento__cell--consult { grid-area: consult; }
.bento__cell--cursos  { grid-area: cursos; }
.bento__cell--insumos { grid-area: insumos; }
.bento__cell--cta     { grid-area: cta; }
.bento__cell--trust   { grid-area: trust; }

.bento__cell {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 1px 1px rgba(26, 22, 20, 0.03);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease, border-color 0.4s ease;
}
.bento__cell:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 22, 20, 0.18);
  box-shadow: 0 14px 30px -24px rgba(26, 22, 20, 0.3);
}

.bento__body { display: flex; flex-direction: column; align-items: flex-start; }
.bento__tag {
  align-self: flex-start; font-family: var(--font-body);
  font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream); background: var(--crimson); padding: 5px 10px; margin-bottom: 14px;
}
.bento__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12;
  color: var(--ink); margin-bottom: 10px;
}
.bento__desc {
  font-family: var(--font-body); font-weight: 400; font-size: 14.5px;
  line-height: 1.65; color: var(--ink-muted); max-width: 46ch;
}
.bento__link {
  margin-top: auto; padding-top: 18px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--crimson-btn); text-decoration: none; align-self: flex-start;
  transition: gap 0.25s ease, opacity 0.25s ease;
}
.bento__link:hover { opacity: 0.7; }
.bento__link--light { color: var(--cream); }

/* A · célula de consultoria — mídia (placeholder de foto) + conversa */
.bento__cell--consult { padding: 22px; }
.bento__media {
  position: relative; flex: 1; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  padding: 26px; margin-bottom: 22px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card-warm);
}
.bento__media-kanji {
  position: absolute; right: 4%; bottom: -6%;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(150px, 18vw, 240px); color: rgba(26, 22, 20, 0.05); user-select: none;
}

/* conversa estilo mensageiro */
.chat { position: relative; z-index: 1; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.chat__bubble { display: flex; align-items: flex-end; gap: 10px; max-width: 82%; }
.chat__bubble--in  { align-self: flex-start; }
.chat__bubble--out { align-self: flex-end; flex-direction: row; }
.chat__bubble p {
  font-family: var(--font-body); font-size: 13px; line-height: 1.45;
  padding: 11px 15px; border-radius: 16px; margin: 0;
}
.chat__bubble--in p {
  background: #ffffff; color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 5px;
}
.chat__bubble--out p {
  background: var(--crimson); color: var(--cream); border-bottom-right-radius: 5px;
}
.chat__avatar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink); background: #fff; border: 2px solid rgba(155, 14, 34, 0.55);
}
.chat__avatar--me { color: var(--cream); background: var(--crimson); border-color: var(--crimson-btn); }

/* B · Cursos — célula de acento crimson */
.bento__cell--accent {
  position: relative; overflow: hidden;
  background: var(--crimson); border-color: var(--crimson-btn);
  box-shadow: none;
}
.bento__cell--accent:hover { box-shadow: 0 14px 30px -24px rgba(155, 14, 34, 0.4); }
.bento__cell--accent .bento__title { color: var(--cream); }
.bento__cell--accent .bento__desc  { color: var(--cream-soft); }
.bento__cell-kanji {
  position: absolute; right: -6px; top: -22px;
  font-family: var(--font-display); font-weight: 700; font-size: 110px; line-height: 1;
  color: rgba(244, 241, 236, 0.16); user-select: none;
}

/* C · Insumos — chips */
.chips {
  margin-top: auto; padding-top: 20px; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chips li {
  font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-soft); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
}

/* D · CTA — botão com cursor "Você" */
.bento__cell--cta { justify-content: center; gap: 6px; }
.bento__cell--cta .bento__desc { margin-bottom: 4px; }
.cta-action { align-self: flex-start; margin-top: 14px; }

/* E · Prova social / curadoria */
.bento__cell--trust { flex-direction: row; align-items: center; gap: 22px; }
.trust__portrait {
  flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  color: rgba(244, 241, 236, 0.85);
  background: linear-gradient(160deg, #2a0810 0%, #0b0a0b 90%);
  border: 2px solid rgba(155, 14, 34, 0.55);
}

/* ═══════════════════════════════════════════════════
   SECTION 7 — AVALIAÇÕES
   Palavra-marca fixa (sticky) ao fundo + cards em
   ziguezague que surgem com reveal direcional no scroll.
═══════════════════════════════════════════════════ */
.reviews {
  position: relative;
  z-index: 8;
  background: var(--black);   /* corte limpo do creme da Consultoria de volta ao preto */
  padding: 170px var(--gutter) 190px;
}

/* título no topo — marca o início da dobra */
.reviews__head { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto 80px; }
.reviews__eyebrow {
  font-family: var(--font-display); font-weight: 400; font-size: 13px;
  letter-spacing: 0.3em; color: var(--crimson-btn); margin-bottom: 18px;
}
.reviews__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(44px, 7vw, 100px); line-height: 0.98;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--cream);
}

/* kanjis decorativos — tom sobre tom, surgem com fade + scale no scroll */
.reviews__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.rk {
  position: absolute; line-height: 1; user-select: none;
  font-family: var(--font-display); font-weight: 700;
  color: rgba(155, 14, 34, 0.16);
  opacity: 0; transform: translateY(46px) scale(0.92);
  transition: opacity 1.2s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.rk.is-in { opacity: 1; transform: translateY(0) scale(1); }
.rk--1 { top: 7%;    left: 3%;   font-size: clamp(88px, 16vw, 260px); }
.rk--2 { top: 27%;   right: 5%;  font-size: clamp(70px, 12vw, 200px); }
.rk--3 { top: 50%;   left: 6%;   font-size: clamp(80px, 14vw, 230px); }
.rk--4 { top: 69%;   right: 7%;  font-size: clamp(70px, 12vw, 200px); }
.rk--5 { bottom: 5%; left: 42%;  font-size: clamp(78px, 13vw, 210px); }

/* trilho em duas colunas; a coluna direita desce → ziguezague */
.reviews__track {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px;
  align-items: start;
}
.reviews__col { display: flex; flex-direction: column; gap: 72px; }
.reviews__col--offset { padding-top: 190px; }

/* card de avaliação — surge com fade + blur + deslize lateral */
.review {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid rgba(184, 18, 40, 0.5);
  background: #0d0809;   /* sólido, sem degradê → leitura limpa sobre os kanjis */
  padding: 34px 36px;
  opacity: 0; filter: blur(12px);
  transform: translateY(46px) translateX(var(--rx, 0px));
  transition:
    opacity 0.85s ease, filter 0.85s ease,
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
  will-change: opacity, transform;
}
.reviews__col .review        { --rx: -42px; }   /* esquerda → entra da esquerda */
.reviews__col--offset .review { --rx: 42px; }   /* direita → entra da direita */
.review.reveal { opacity: 1; filter: blur(0); transform: none; }
.review:hover { border-color: rgba(184, 18, 40, 0.95); }

.review__stars {
  color: var(--crimson-btn); font-size: 15px; letter-spacing: 4px; margin-bottom: 22px;
}
.review__text {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6;
  color: var(--cream); margin-bottom: 40px;
}
.review__author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.review__avatar {
  flex-shrink: 0; width: 50px; height: 50px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--cream); object-fit: cover;
  background: linear-gradient(160deg, #2a0810 0%, #0b0a0b 90%);
  border: 1px solid rgba(184, 18, 40, 0.6);
}
.review__id { display: flex; flex-direction: column; }
.review__name { font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--crimson-btn); }
.review__role { font-family: var(--font-body); font-size: 13px; color: var(--cream-muted); margin-top: 2px; }

/* card de estatística */
.review--stat { justify-content: center; }
.stat__score { display: flex; align-items: baseline; gap: 4px; margin-bottom: 22px; }
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(54px, 7vw, 86px); line-height: 1; color: var(--crimson-btn);
}
.stat__den { font-family: var(--font-body); font-size: 22px; color: var(--cream-muted); }
.stat__trust { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.stat__avatars { display: flex; }
.stat__av {
  width: 38px; height: 38px; border-radius: 50%; margin-left: -10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  color: var(--cream); background: linear-gradient(160deg, #2a0810, #0b0a0b);
  border: 2px solid var(--black);
}
.stat__av:first-child { margin-left: 0; }
.stat__av--more { background: var(--crimson); }
.stat__trust-text { display: flex; flex-direction: column; line-height: 1.3; }
.stat__trust-title { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--cream); }
.stat__trust-sub { font-family: var(--font-body); font-size: 13px; color: var(--cream-muted); }

/* ═══════════════════════════════════════════════════
   SECTION 8 — MARCAS ATENDIDAS  (grade de logos)
═══════════════════════════════════════════════════ */
.brands {
  position: relative;
  z-index: 8;
  background: var(--black);
  padding: 40px var(--gutter) 130px;
}
.brands__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.brands__head { margin-bottom: 56px; }
.brands__eyebrow {
  font-family: var(--font-display); font-weight: 400; font-size: 13px;
  letter-spacing: 0.3em; color: var(--crimson-btn); margin-bottom: 18px;
}
.brands__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 50px); line-height: 1.1;
  letter-spacing: -0.01em; color: var(--cream); max-width: 720px;
}
.brands__title em { font-style: italic; color: var(--crimson-btn); }

.brands__grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(244, 241, 236, 0.12);   /* vira as linhas finas entre as células */
  border: 1px solid rgba(244, 241, 236, 0.12);
}
.brand {
  display: flex; align-items: center; justify-content: center;
  min-height: 150px; padding: 28px;
  background: var(--black);
  transition: background 0.35s ease;
}
.brand:hover { background: #0c0a0b; }
/* placeholder enquanto não há logo — troque o <span> por <img class="brand__logo"> */
.brand__ph {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244, 241, 236, 0.22);
}
.brand__logo {
  max-width: 100%; max-height: 56px; object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);   /* logo monocromática creme */
  opacity: 0.5; transition: opacity 0.35s ease;
}
.brand:hover .brand__logo { opacity: 1; }

/* ═══════════════════════════════════════════════════
   SECTION 9 — FAQ  (acordeão padrão em 2 colunas)
═══════════════════════════════════════════════════ */
.faq {
  position: relative;
  z-index: 9;
  background: var(--black);
  padding: 140px var(--gutter) 160px;
}
.faq__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

.faq__eyebrow {
  font-family: var(--font-display); font-weight: 400; font-size: 13px;
  letter-spacing: 0.3em; color: var(--crimson-btn); margin-bottom: 20px;
}
.faq__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(44px, 7vw, 104px); line-height: 0.98;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--crimson-btn);
  margin-bottom: 32px;
}
.faq__rule {
  width: 100%; height: 1px; background: rgba(184, 18, 40, 0.55);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal .faq__rule { transform: scaleX(1); }

.faq__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-items: start;
  margin-top: 56px;
}
/* colunas independentes → abrir um item não cria vão na coluna ao lado */
.faq__col { display: flex; flex-direction: column; gap: 18px; }
.faq__item { border: 1px solid rgba(184, 18, 40, 0.45); transition: border-color 0.3s ease; }
.faq__item:hover { border-color: rgba(184, 18, 40, 0.8); }
.faq__item.is-open { border-color: rgba(184, 18, 40, 0.9); }
.faq__q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; text-align: left;
  font-family: var(--font-body); font-weight: 500; font-size: clamp(14px, 1.1vw, 16px);
  color: rgba(184, 18, 40, 0.85);
  transition: color 0.25s ease;
}
.faq__item:hover .faq__q,
.faq__item.is-open .faq__q { color: var(--crimson-btn); }
.faq__q-icon {
  flex-shrink: 0; width: 20px; height: 20px; color: var(--crimson-btn);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq__item.is-open .faq__q-icon { transform: rotate(180deg); }
.faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__a p {
  padding: 0 24px 24px;
  font-family: var(--font-body); font-weight: 400; font-size: 14.5px; line-height: 1.7;
  color: var(--cream-muted);
}

/* ═══════════════════════════════════════════════════
   FOOTER  (crimson + creme · marca que alterna PT ⇄ JP)
═══════════════════════════════════════════════════ */
.footer {
  position: relative;
  z-index: 10;
  background: var(--crimson);
  padding: 110px var(--gutter) 46px;
  overflow: hidden;
}
.footer__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

.footer__top {
  display: flex; align-items: stretch;
  min-height: clamp(240px, 28vw, 360px);
}

/* marca grande — duas camadas EMPILHADAS na mesma célula → crossfade letra a letra */
.footer__brand {
  position: relative; flex: 1; min-width: 0;
  padding-right: clamp(36px, 5vw, 80px);     /* respiro antes da divisória */
  display: grid; align-content: center; justify-items: start;
}
.footer__brand-layer {
  grid-area: 1 / 1;          /* as duas camadas ocupam exatamente o mesmo lugar */
  display: flex; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 6.6vw, 104px); line-height: 1;
  letter-spacing: 0.01em; color: var(--cream);
}
.footer__brand-layer--latin span:nth-child(2) { margin-left: 0.34em; }   /* respiro do "O BONSAI" */
.footer__brand-layer span {
  display: inline-block; will-change: opacity, transform, filter;
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* base: latim visível, japonês escondido */
.footer__brand-layer--jp span { opacity: 0; filter: blur(8px); transform: translateY(0.16em); }
/* alternância (classe .is-jp via JS) */
.footer__brand.is-jp .footer__brand-layer--latin span { opacity: 0; filter: blur(8px); transform: translateY(-0.16em); }
.footer__brand.is-jp .footer__brand-layer--jp span    { opacity: 1; filter: blur(0); transform: translateY(0); }
/* stagger por letra */
.footer__brand-layer span:nth-child(1) { transition-delay: 0s; }
.footer__brand-layer span:nth-child(2) { transition-delay: 0.035s; }
.footer__brand-layer span:nth-child(3) { transition-delay: 0.07s; }
.footer__brand-layer span:nth-child(4) { transition-delay: 0.105s; }
.footer__brand-layer span:nth-child(5) { transition-delay: 0.14s; }
.footer__brand-layer span:nth-child(6) { transition-delay: 0.175s; }
.footer__brand-layer span:nth-child(7) { transition-delay: 0.21s; }

/* metade direita — colunas de links com a divisória central (borda esquerda) */
.footer__cols {
  flex-shrink: 0;
  display: flex; align-items: center;          /* centra o grupo de links na altura */
  padding-left: clamp(40px, 6vw, 90px);
  border-left: 1px solid rgba(244, 241, 236, 0.3);
}
.footer__cols-inner {
  display: flex; gap: clamp(28px, 3.5vw, 56px);
  align-items: flex-start;                     /* colunas alinhadas pelo topo entre si */
}
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col a {
  font-family: var(--font-body); font-weight: 400; font-size: 16px;
  color: var(--cream-soft); text-decoration: none; width: -moz-fit-content; width: fit-content;
  transition: color 0.25s ease;
}
.footer__col a:hover { color: var(--cream); }

.footer__seams { display: flex; flex-direction: column; gap: 6px; margin: clamp(50px, 7vw, 90px) 0 30px; }
.footer__seams span { height: 1px; background: rgba(244, 241, 236, 0.3); }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer__credit, .footer__copy {
  font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--cream-muted);
}
.footer__credit strong { font-weight: 600; color: var(--cream-soft); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero__main { justify-content: flex-end; }
  .hero__quote { position: static; max-width: 420px; margin-top: 36px; }
  .story__content { width: 100%; grid-template-columns: 1fr; gap: 40px; }
  .story__seams { display: none; }
  .acervo__cards { grid-template-columns: 1fr; }
  .acervo__head  { flex-direction: column; align-items: flex-start; }

  /* O Artista → single column, spine to the left */
  .artista-portrait-block { grid-template-columns: 1fr; gap: 40px; padding: 90px 0 100px; }
  .artista-steps__line { left: 0; }
  .artista-step { grid-template-columns: 1fr; column-gap: 0; row-gap: 16px; min-height: 0; padding: 60px 0 60px 28px; }
  .artista-step.is-right .artista-step__head,
  .artista-step.is-left  .artista-step__head { grid-column: 1; justify-self: start; align-items: flex-start; text-align: left; }
  .artista-step.is-right .artista-step__desc,
  .artista-step.is-left  .artista-step__desc { grid-column: 1; justify-self: start; text-align: left; }

  /* Loja → cards stacked */
  .loja__cards { grid-template-columns: 1fr; gap: 40px; }

  /* Consultoria → bento empilhado em coluna única */
  .consultoria { padding: 110px var(--gutter) 110px; }
  .consultoria__lead { margin-bottom: 44px; }
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 16px;
    grid-template-areas:
      "consult"
      "cursos"
      "insumos"
      "cta"
      "trust";
  }
  .bento__media { min-height: 220px; }

  /* Avaliações → coluna única, sem deslize lateral nem ziguezague */
  .reviews { padding: 100px var(--gutter) 110px; }
  .reviews__track { grid-template-columns: 1fr; gap: 0; }
  .reviews__col { gap: 24px; }
  .reviews__col + .reviews__col { margin-top: 24px; }
  .reviews__col--offset { padding-top: 0; }
  .reviews__col .review,
  .reviews__col--offset .review { --rx: 0px; }
  .reviews__head { margin-bottom: 48px; }
  .rk { font-size: clamp(64px, 22vw, 150px) !important; }

  /* Marcas → 2 colunas */
  .brands { padding: 20px var(--gutter) 90px; }
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  .brand { min-height: 120px; }

  /* FAQ → coluna única */
  .faq { padding: 90px var(--gutter) 110px; }
  .faq__grid { grid-template-columns: 1fr; }

  /* Footer → empilhado */
  .footer { padding: 70px var(--gutter) 38px; }
  .footer__top { flex-direction: column; min-height: 0; gap: 40px; }
  .footer__brand { padding-right: 0; }
  .footer__brand-layer { font-size: clamp(48px, 16vw, 110px); }
  .footer__cols { padding-left: 0; border-left: none; }
  .footer__cols-inner { flex-wrap: wrap; gap: 28px 44px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* tablet → bento em 2 colunas (entre 881px e 1080px) */
@media (min-width: 881px) and (max-width: 1080px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "consult consult"
      "cursos  insumos"
      "cta      trust";
  }
}

/* ═══════════════════════════════════════════════════
   UI PREMIUM — cursor custom + barra de progresso
═══════════════════════════════════════════════════ */
/* mantém a seta nativa + um ponto que segue (estilo Kunai) */
.cursor-follow {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--crimson-btn); border: 2px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.4s ease;
  will-change: transform;
}
/* sobre seções vermelhas → anel preto vazado */
body.cursor-on-red .cursor-follow { background: transparent; border-color: var(--black); }
/* escondido na tela de carregamento (loader) */
body.is-loading .cursor-follow { opacity: 0; }

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9998;
  background: var(--crimson-btn);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none; will-change: transform;
}