/* ============================================================
   Mídia Kit Thascya 2026
   Sistema fluido único. Layouts intrínsecos, sem larguras fixas.
   As rotações de imagem são conduzidas por JavaScript, para
   funcionarem também em aparelhos com "reduzir movimento" ligado.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --ink:        #16120E;
  --ink-2:      #3A312A;
  --ink-3:      #6B5D51;
  --paper:      #F8F3EA;
  --paper-2:    #F0E7D9;
  --sand:       #E2D6C3;
  --espresso:   #1A1411;
  --espresso-2: #241C17;
  --gold:       #BE9E63;
  --gold-soft:  #E6D4AE;
  --line:       rgba(22, 18, 14, .14);
  --line-light: rgba(255, 255, 255, .16);

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Manrope", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;

  --t--1: clamp(13px, .28vw + 12.1px, 15px);
  --t-0:  clamp(16px, .35vw + 14.9px, 18.5px);
  --t-1:  clamp(18px, .65vw + 16px, 22px);
  --t-2:  clamp(23px, 1.5vw + 18px, 34px);
  --t-3:  clamp(28px, 2.5vw + 19px, 48px);
  --t-4:  clamp(35px, 4.4vw + 19px, 72px);
  --t-5:  clamp(37px, 6vw + 16px, 92px);

  --gutter:  clamp(20px, 5.2vw, 92px);
  --section: clamp(66px, 8vh + 2.6vw, 130px);
  --gap:     clamp(18px, 2.4vw, 40px);
  --maxw:    1420px;

  --radius:   clamp(16px, 1.6vw, 26px);
  --radius-l: clamp(20px, 2.4vw, 38px);
  --shadow:   0 30px 70px -30px rgba(26, 20, 17, .38);
  --ease:     cubic-bezier(.22, .68, .32, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
picture > img { background: var(--paper-2); }
.dark picture > img { background: var(--espresso-2); }

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Tipografia utilitária ---------- */
/* Fraunces: traço encorpado e serifas sólidas, sem hastes que somem. */
.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.012em;
  font-optical-sizing: auto;
}
.display em { font-style: italic; font-weight: 500; }

.eyebrow {
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
}
.dark .eyebrow { color: var(--gold); }

.lead { font-size: var(--t-1); line-height: 1.6; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.dark .muted, .dark .lead { color: rgba(255, 255, 255, .74); }

/* ---------- 4. Estrutura ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* item de grade tem min-width auto por padrão e cresceria até o tamanho da
   faixa rolável, matando a rolagem. Isto mantém tudo preso à largura da tela. */
.shell > *, .layer > *, .legacy-grid > *, .metrics-split > *, .top-posts > * { min-width: 0; }
.rail { min-width: 0; max-width: 100%; }

section { position: relative; }

.band { padding-block: var(--section); }
.band.tight-top { padding-top: clamp(46px, 4.6vw, 68px); }

.dark { background: var(--espresso); color: #fff; }
.dark h2, .dark h3 { color: #fff; }

.section-head {
  display: grid;
  gap: clamp(16px, 2vw, 30px);
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: clamp(38px, 5vw, 72px);
}
@media (min-width: 860px) {
  .section-head.split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
}
.section-head h2 { font-size: var(--t-3); }
.section-head h2 em { color: var(--gold); }

.auto-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr));
}
.quad { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px)  { .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.duo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 5. Botões e links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 clamp(22px, 2.4vw, 32px);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.dark .btn-solid { background: var(--gold); color: var(--espresso); }
.dark .btn-solid:hover { background: #fff; color: var(--ink); }
.dark .btn-ghost { border-color: var(--line-light); color: #fff; }
.dark .btn-ghost:hover { border-color: #fff; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.arrow-link:hover { gap: 16px; color: var(--gold); }

/* ---------- 6. Barra de progresso ---------- */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 90;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--gold);
  pointer-events: none;
}

/* ---------- 7. Cabeçalho ---------- */
/* claro sobre a fotografia do topo, escuro depois que gruda */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: clamp(68px, 8vh, 88px);
  padding-inline: var(--gutter);
  color: #fff;
  transition: color .45s var(--ease);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(248, 243, 234, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.header.is-stuck::before { opacity: 1; }
.header.is-stuck { color: var(--ink); }
.header > * { position: relative; z-index: 1; }

.header .logo { width: clamp(104px, 11vw, 138px); }
.header .logo img { width: 100%; height: auto; filter: invert(1); transition: filter .45s var(--ease); }
.header.is-stuck .logo img { filter: none; }

.header nav { display: none; margin-left: auto; gap: clamp(20px, 2.4vw, 38px); }
.header nav a {
  position: relative;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-block: 6px;
}
.header nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease);
}
.header nav a:hover::after { transform: scaleX(1); }

.header .btn { min-height: 44px; display: none; }
.header .btn-solid { background: #fff; color: var(--ink); }
.header.is-stuck .btn-solid { background: var(--ink); color: var(--paper); }
.header .btn-solid:hover { background: var(--gold); color: #fff; }

.menu-btn {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.menu-btn span + span { margin-top: 5px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 900px) {
  .header nav { display: flex; }
  .header .btn { display: inline-flex; }
  .menu-btn { display: none; }
}

/* menu aberto: fundo claro, então o cabeçalho precisa escurecer */
.header.is-open { color: var(--ink); }
.header.is-open .logo img { filter: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 79;
  display: grid;
  align-content: center;
  gap: clamp(10px, 2vh, 22px);
  padding: var(--gutter);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-size: var(--t-3);
  line-height: 1.1;
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(8px, 1.6vh, 16px);
}
.drawer .btn { margin-top: clamp(14px, 3vh, 30px); justify-self: start; }
@media (min-width: 900px) { .drawer { display: none; } }

/* ---------- 8. Hero ---------- */
/* fotografia sangrando na tela inteira, texto por cima, em qualquer largura */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100svh;
  padding-block: clamp(120px, 15vh, 170px) clamp(44px, 8vh, 96px);
  overflow: hidden;
  color: #fff;
  background: var(--espresso);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* rosto na parte alta do quadro, deixando a base livre para o texto */
  object-position: 50% 12%;
  background: var(--espresso);
}
@media (min-width: 900px) {
  .hero-media img { object-position: 100% 50%; }
}

/* véu subindo do rodapé no celular e vindo da esquerda no computador */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg,
      rgba(16, 11, 9, .96) 0%,
      rgba(16, 11, 9, .93) 26%,
      rgba(16, 11, 9, .72) 42%,
      rgba(16, 11, 9, .28) 56%,
      rgba(16, 11, 9, 0) 74%),
    linear-gradient(180deg, rgba(16, 11, 9, .5) 0%, transparent 22%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(16, 11, 9, .84) 0%, rgba(16, 11, 9, .54) 36%, rgba(16, 11, 9, 0) 66%),
      linear-gradient(180deg, rgba(16, 11, 9, .34) 0%, transparent 22%);
  }
}

.hero .shell { position: relative; z-index: 2; }
/* nada de ch em contêiner: a unidade resolve contra a fonte do próprio
   elemento e espremeria o bloco inteiro. Largura em px e vw. */
.hero-copy {
  display: grid;
  gap: clamp(14px, 2.2vw, 28px);
  justify-items: start;
  max-width: 100%;
}
.hero .eyebrow { color: var(--gold-soft); }
.hero h1 { font-size: var(--t-5); }
.hero h1 em { color: var(--gold-soft); }
.hero-copy .lead { color: rgba(255, 255, 255, .88); max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.hero .btn-solid { background: #fff; color: var(--ink); }
.hero .btn-solid:hover { background: var(--gold); color: #fff; }
@media (min-width: 900px) {
  .hero-copy { max-width: min(48vw, 620px); }
  .hero-copy .lead { max-width: 38ch; }
}

/* ---------- 9. Faixas roláveis ---------- */
/* uma só mecânica: contêiner com rolagem nativa e avanço automático por JS.
   funciona igual no toque e no mouse, e não depende de animação CSS. */
.rail {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-track { display: flex; gap: var(--gap); width: max-content; padding-block: 4px; }

.rail-card {
  flex: 0 0 clamp(190px, 24vw, 268px);
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
}
.rail-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.28);
  transition: filter .8s var(--ease);
}
.rail-card:hover img { filter: saturate(1); }

.rail-hint {
  margin-top: 16px;
  font-size: var(--t--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.universe .shell { display: grid; gap: clamp(30px, 4vw, 56px); }
.universe-copy { display: grid; gap: clamp(16px, 2vw, 26px); max-width: 62ch; }
.universe-copy h2 { font-size: var(--t-3); }
.universe-copy h2 em { color: var(--gold); }

/* ---------- 10. Métricas ---------- */
.metrics { background: var(--espresso); }
.metrics::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 88% 4%, rgba(190, 158, 99, .16), transparent 70%);
  pointer-events: none;
}
.metrics .shell { position: relative; }

.platforms { margin-bottom: var(--gap); }
.platform {
  display: grid;
  gap: 6px;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.platform:hover { border-color: rgba(190, 158, 99, .55); transform: translateY(-4px); }
.platform-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(14px, 2vw, 22px);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.platform-top svg { width: 20px; height: 20px; flex: none; }
.platform b { font-family: var(--display); font-size: var(--t-3); font-weight: 500; line-height: 1; }
.platform span { font-size: var(--t--1); letter-spacing: .08em; color: rgba(255, 255, 255, .62); }

.metrics-split { display: grid; gap: var(--gap); }
@media (min-width: 980px) {
  .metrics-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; }
}

.reach {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(26px, 3.2vw, 46px);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, rgba(190, 158, 99, .14), rgba(255, 255, 255, .02));
}
.reach-number { font-family: var(--display); font-size: var(--t-4); font-weight: 500; line-height: .95; color: var(--gold-soft); }
.reach-sub { font-size: var(--t-1); color: rgba(255, 255, 255, .82); }
.reach-split {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--line-light);
}
.reach-split b { display: block; font-family: var(--display); font-size: var(--t-2); font-weight: 500; line-height: 1.1; }
.reach-split span { font-size: var(--t--1); letter-spacing: .08em; color: rgba(255, 255, 255, .6); }

.audience { display: grid; gap: clamp(18px, 2.4vw, 26px); align-content: start; }
.bar { display: grid; gap: 8px; grid-template-columns: 1fr auto; align-items: baseline; }
.bar span { font-size: var(--t-0); }
.bar b { font-family: var(--display); font-size: var(--t-1); font-weight: 500; color: var(--gold-soft); }
.bar i { grid-column: 1 / -1; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.bar i::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--v, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.5s var(--ease);
}
.is-visible .bar i::after { transform: scaleX(1); }

.top-posts { margin-top: var(--gap); display: grid; gap: var(--gap); }
@media (min-width: 980px) { .top-posts { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.top-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .top-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.top-list article { padding: clamp(16px, 2vw, 24px); border: 1px solid var(--line-light); border-radius: var(--radius); }
.top-list b { display: block; font-family: var(--display); font-size: var(--t-2); font-weight: 500; line-height: 1; color: var(--gold-soft); }
.top-list span { font-size: var(--t--1); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .58); }

.proof { display: grid; justify-items: center; gap: 12px; }
.proof-pair { display: flex; gap: 14px; }
.proof figure { margin: 0; width: clamp(126px, 19vw, 168px); }
.proof img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-light); }
.proof figcaption {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .45);
}

/* ---------- 11. Camadas de conteúdo ---------- */
.layer { display: grid; gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.layer + .layer { margin-top: var(--section); }
@media (min-width: 860px) {
  .layer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .layer:nth-child(even) .layer-media { order: 2; }
}
.layer-media {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
@media (min-width: 860px) { .layer-media { aspect-ratio: 4 / 4.4; } }
.layer-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* troca conduzida por JS, apenas opacidade: a foto nunca é rasterizada menor */
.js .layer-media img { opacity: 0; transition: opacity 1.5s var(--ease); }
.js .layer-media img.is-on { opacity: 1; }

.layer-copy { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.layer-index { font-family: var(--display); font-size: var(--t-2); color: var(--gold); line-height: 1; }
.layer-copy h3 { font-family: var(--display); font-size: var(--t-3); line-height: 1.02; font-weight: 500; font-variation-settings: "SOFT" 24, "WONK" 1; }
.layer-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.layer-tags span {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t--1);
  letter-spacing: .06em;
  color: var(--ink-2);
}

/* ---------- 12. Vida real ---------- */
.real { background: var(--paper-2); }
.real .shell { display: grid; gap: clamp(30px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .real .shell { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }

.collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  aspect-ratio: 4 / 4.6;
}
.collage figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .c-main   { grid-area: 1 / 1 / 11 / 10; box-shadow: var(--shadow); }
.collage .c-detail {
  grid-area: 7 / 6 / 13 / 13;
  border: clamp(5px, .7vw, 10px) solid var(--paper-2);
  border-radius: calc(var(--radius) + 6px);
  z-index: 1;
}
.real-copy { display: grid; gap: clamp(16px, 2vw, 26px); }
.real-copy h2 { font-size: var(--t-3); }
.real-copy h2 em { color: var(--gold); }

/* ---------- 13. Trajetória ---------- */
.legacy { background: var(--espresso); overflow: hidden; }
.legacy-bg { position: absolute; inset: 0; }
.legacy-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.legacy-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--espresso) 0%, rgba(26, 20, 17, .82) 42%, var(--espresso) 100%);
}
.legacy .shell { position: relative; }

.awards { margin-block: clamp(34px, 4.4vw, 60px); }
.awards article {
  display: grid;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
}
.awards i { width: 26px; height: 1px; background: var(--gold); }
.awards p { font-size: var(--t-1); line-height: 1.45; }

.legacy-grid { display: grid; gap: var(--gap); }
@media (min-width: 980px) { .legacy-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

.stage {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #0E0B09;
}
@media (min-width: 980px) { .stage { aspect-ratio: 16 / 10; } }
.stage figure { position: absolute; inset: 0; margin: 0; }
.stage img { width: 100%; height: 100%; object-fit: cover; }
.js .stage figure { opacity: 0; transition: opacity 1.4s var(--ease); }
.js .stage figure.is-on { opacity: 1; }

.stage-caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 30px);
  background: linear-gradient(0deg, rgba(14, 11, 9, .88), transparent);
  font-size: var(--t--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.stage-dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.stage-dots i { height: 2px; background: rgba(255, 255, 255, .26); border-radius: 999px; overflow: hidden; }
.stage-dots i::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.stage-dots i.is-on::after { transform: scaleX(1); transition: transform 5s linear; }

.highlights { display: grid; gap: var(--gap); align-content: start; }
.highlights article { display: grid; gap: 10px; padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line-light); border-radius: var(--radius); }
.highlights h3 { font-family: var(--display); font-size: var(--t-2); line-height: 1.05; font-weight: 500; color: var(--gold-soft); }
.highlights p { font-size: var(--t-0); color: rgba(255, 255, 255, .72); }

.names { margin-top: clamp(34px, 4.4vw, 60px); }
.names .rail {
  padding-block: clamp(14px, 2vw, 22px);
  border-block: 1px solid var(--line-light);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.names .rail-track { gap: clamp(26px, 3.4vw, 54px); }
.names .rail-track span {
  font-family: var(--display);
  font-size: var(--t-2);
  font-weight: 500;
  color: rgba(255, 255, 255, .58);
  white-space: nowrap;
}

/* ---------- 14. Viagens ---------- */
.travel-rail .rail-track { align-items: stretch; }
.travel-rail { scroll-snap-type: x mandatory; }
.travel-card { scroll-snap-align: center; }
@media (min-width: 920px) {
  .travel-rail { margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; }
  .travel-rail .rail-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; }
  .travel-rail .travel-card { flex: initial; }
}
.travel-card {
  flex: 0 0 min(84vw, 400px);
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--paper);
}
.travel-frame { position: relative; aspect-ratio: 9 / 16; background: var(--sand); }
.travel-frame video,
.travel-frame img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.travel-frame video { opacity: 0; transition: opacity .8s var(--ease); }
.travel-frame video.is-playing { opacity: 1; }
.travel-copy { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 2.4vw, 30px); }
.travel-copy .place { font-size: var(--t--1); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.travel-copy h3 { font-family: var(--display); font-size: var(--t-2); line-height: 1.06; font-weight: 500; }
.travel-copy p { font-size: var(--t-0); color: var(--ink-2); }
.travel-copy .arrow-link { margin-top: 6px; justify-self: start; }

/* ---------- 15. Formatos ---------- */
.formats { background: var(--paper-2); }
.format-grid { --min: 268px; }
.format-grid article {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid transparent;
  transition: border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.format-grid article:hover { border-color: var(--sand); transform: translateY(-5px); box-shadow: var(--shadow); }
.format-grid span { font-family: var(--display); font-size: var(--t-1); color: var(--gold); line-height: 1; }
.format-grid h3 { font-family: var(--display); font-size: var(--t-2); line-height: 1.06; font-weight: 500; }
.format-grid p { font-size: var(--t-0); color: var(--ink-2); }
.formats-note {
  margin-top: var(--gap);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line);
  font-size: var(--t-1);
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---------- 16. Marcas ---------- */
.brands .rail {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands .rail-track { align-items: center; gap: clamp(30px, 4vw, 68px); padding-block: clamp(14px, 2vw, 26px); }
.brands .rail-track img {
  width: 170px;
  height: 60px;
  flex: none;
  object-fit: contain;
  background: none;
  opacity: .66;
  transition: opacity .5s var(--ease);
}
.brands .rail-track img:hover { opacity: 1; }

/* ---------- 17. Depoimentos ---------- */
.quotes blockquote {
  display: grid;
  gap: 16px;
  align-content: start;
  margin: 0;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quotes .mark { font-family: var(--display); font-size: var(--t-3); line-height: .6; color: var(--gold); }
.quotes p { font-size: var(--t-1); line-height: 1.6; color: var(--ink-2); }
.quotes footer {
  display: grid;
  gap: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.quotes footer small { font-weight: 400; letter-spacing: .06em; text-transform: none; color: var(--ink-3); }

/* ---------- 18. Contato ---------- */
.contact { background: var(--espresso); }
.contact .shell { display: grid; gap: clamp(30px, 4vw, 62px); align-items: center; }
@media (min-width: 900px) { .contact .shell { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.contact figure { margin: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--espresso-2); }
.contact figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.contact-copy { display: grid; gap: clamp(16px, 2vw, 26px); justify-items: start; }
.contact-copy h2 { font-size: var(--t-3); }
.contact-copy h2 em { color: var(--gold); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.contact-details {
  display: grid;
  gap: 8px;
  width: 100%;
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--line-light);
  font-size: var(--t-0);
  color: rgba(255, 255, 255, .78);
}
.contact-details a:hover { color: var(--gold); }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.socials svg { width: 17px; height: 17px; flex: none; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- 19. Rodapé ---------- */
.footer {
  display: grid;
  gap: 20px;
  padding: clamp(34px, 4vw, 52px) var(--gutter);
  background: var(--espresso);
  border-top: 1px solid var(--line-light);
  color: rgba(255, 255, 255, .55);
  font-size: var(--t--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  justify-items: center;
}
.footer img { width: 118px; opacity: .8; filter: invert(1); }

/* ---------- 20. Revelação ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

/* Redução de movimento: desliga o que é decorativo.
   As trocas de fotografia continuam, porque são conteúdo do mídia kit. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .format-grid article:hover, .platform:hover { transform: none; }
}