/* ==========================================================================
   &ME SP · KEINEMUSIK — Apresentação de patrocínio
   Direção: "PROTOCOL" — editorial suíço / International Typographic Style,
   papel off-white + P&B vintage (halftone/sépia) + vermelho-sinal.
   HTML/CSS/JS puro, sem build. Inspirado na arquitetura do deck RC27.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* papel / tinta */
  --paper:      #FAFAF7;
  --paper-2:    #F3EFE7;         /* seção alternada, levemente mais quente */
  --ink:        #16130F;         /* quase-preto quente (texto no claro) */
  --ink-soft:   rgba(22,19,15,0.66);
  --ink-faint:  rgba(22,19,15,0.42);
  --line:       rgba(22,19,15,0.16);
  --line-soft:  rgba(22,19,15,0.10);
  /* escuro (seções de drama) */
  --coal:       #17140F;
  --cream:      #F2ECE1;
  --cream-soft: rgba(242,236,225,0.68);
  --cream-faint:rgba(242,236,225,0.42);
  /* acento */
  --red:        #E1261C;
  --red-ink:    #FFFFFF;
  /* foto */
  --veil:       #0A0908;

  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* escala fluida — Swiss usa tamanhos CONTIDOS (nada gigante) */
  --fs-eyebrow: clamp(0.68rem, 0.62rem + 0.2vw, 0.76rem);
  --fs-cover:   clamp(3.4rem, 1.6rem + 8vw, 8.5rem);
  --fs-display: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem);
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  --fs-lede:    clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  --fs-body:    clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
  --fs-small:   clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
  --fs-stat:    clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem);
  --fs-stat-sm: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);

  --pad-x: clamp(1.4rem, 6vw, 7.5rem);
  --pad-y: clamp(2rem, 5vh, 4rem);
  --maxw:  1220px;
  --col:   minmax(0, 1fr);
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --topbar-h: 58px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper);
  font-size: var(--fs-body); line-height: 1.62; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow: hidden; height: 100svh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--red-ink); }

/* scroll container */
.deck { position: relative; height: 100svh; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }

/* grão de papel vintage */
.grain { position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Panels
   ========================================================================== */
.panel { position: relative; min-height: 100svh; width: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: calc(var(--topbar-h) + var(--pad-y) * 0.6) var(--pad-x) var(--pad-y);
  overflow: hidden; scroll-snap-align: start; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; }
.wrap.center { text-align: center; }
.wrap.narrow { max-width: 900px; }

.panel--paper   { background: var(--paper); color: var(--ink); }
.panel--paper-2 { background: var(--paper-2); color: var(--ink); }
.panel--ink     { background: var(--coal); color: var(--cream);
  --ink: var(--cream); --ink-soft: var(--cream-soft); --ink-faint: var(--cream-faint); --line: rgba(242,236,225,0.16); --line-soft: rgba(242,236,225,0.09); }

/* photo panels — vintage: grayscale + contraste + sépia + halftone */
.panel--photo { color: var(--cream);
  --ink: var(--cream); --ink-soft: var(--cream-soft); --ink-faint: var(--cream-faint); --line: rgba(242,236,225,0.2); }
.panel--photo .panel-bg { position: absolute; inset: -6%; z-index: 0; overflow: hidden; }
.pbg-inner { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05);
  filter: grayscale(1) contrast(1.16) brightness(1.02) sepia(0.05); transition: filter .6s var(--ease); }
.panel.in .pbg-inner { animation: kenburns 22s var(--ease) forwards; }
@keyframes kenburns { to { transform: scale(1.12); } }
/* halftone / meio-tom — bem sutil */
.panel--photo .panel-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.18; mix-blend-mode: multiply; transition: opacity .6s var(--ease);
  background-image: radial-gradient(rgba(0,0,0,0.85) 38%, transparent 46%); background-size: 4px 4px; }
/* hover: a foto ganha cor (o veil e a sombra mantêm o texto legível) */
@media (hover: hover) {
  .panel--photo:hover .pbg-inner { filter: grayscale(0) contrast(1.02) brightness(1) sepia(0) saturate(1.05); }
  .panel--photo:hover .panel-bg::after { opacity: 0; }
}
/* scrim no topo p/ legibilidade do topbar/folio sobre céu claro */
.panel--photo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--veil) 55%, transparent), transparent); }
/* veils */
.panel--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.veil-left::after   { background:
  linear-gradient(95deg, var(--veil) 0%, color-mix(in srgb, var(--veil) 82%, transparent) 38%, color-mix(in srgb, var(--veil) 40%, transparent) 66%, transparent 90%),
  linear-gradient(0deg, color-mix(in srgb, var(--veil) 55%, transparent), transparent 40%); }
/* texto sobre foto: sempre legível */
.panel--photo .eyebrow, .panel--photo .display, .panel--photo h2 { text-shadow: 0 2px 22px rgba(0,0,0,0.62); }
.panel--photo .lede { color: var(--cream); text-shadow: 0 1px 16px rgba(0,0,0,0.8); }
.panel--photo .mini-stats .ms .n { text-shadow: 0 1px 14px rgba(0,0,0,0.85); }
.panel--photo .mini-stats .ms .l { color: var(--cream-soft); text-shadow: 0 1px 12px rgba(0,0,0,0.85); }
.panel--photo .lede.big { color: var(--cream); }
.veil-bottom::after { background: linear-gradient(0deg, var(--veil) 2%, color-mix(in srgb, var(--veil) 34%, transparent) 52%, transparent 84%); }
.veil-full::after   { background:
  linear-gradient(180deg, color-mix(in srgb, var(--veil) 74%, transparent) 0%, color-mix(in srgb, var(--veil) 50%, transparent) 32%, color-mix(in srgb, var(--veil) 60%, transparent) 66%, var(--veil) 100%),
  radial-gradient(120% 100% at 50% 43%, color-mix(in srgb, var(--veil) 26%, transparent) 0%, color-mix(in srgb, var(--veil) 62%, transparent) 80%); }

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.8em; margin: 0 0 clamp(1rem,2.4vh,1.7rem); }
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--red); flex: none; }
.eyebrow.plain::before { display: none; }
.wrap.center .eyebrow { justify-content: center; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.04;
  letter-spacing: -0.02em; }
.display { font-size: var(--fs-display); max-width: 20ch; }
h2 { font-size: var(--fs-h2); }
.wrap.center .display, .wrap.center h2 { margin-left: auto; margin-right: auto; }
.display .accent, .accent { color: var(--red); }

.lede { font-size: var(--fs-lede); line-height: 1.52; font-weight: 400; max-width: 46ch; color: var(--ink-soft);
  margin: clamp(1rem,2.4vh,1.6rem) 0 0; }
.wrap.center .lede { margin-left: auto; margin-right: auto; }
.lede.big { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem,0.9rem+1.8vw,2.1rem);
  line-height: 1.3; letter-spacing: -0.015em; max-width: 24ch; color: var(--ink); }
.lede.wide { max-width: 56ch; }
.fine { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: clamp(1rem,2vh,1.6rem); }
/* citação de fontes (dá credibilidade aos dados) */
.sources { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 40%, transparent); margin-top: clamp(0.9rem,2vh,1.5rem); line-height: 1.5; }
.sources b { color: color-mix(in srgb, var(--ink) 60%, transparent); font-weight: 400; }
.rule { width: 100%; height: 1px; background: var(--line); border: 0; margin: clamp(1.1rem,2.2vh,1.7rem) 0; }
.rule.short { width: 54px; height: 2px; background: var(--red); }

/* metadados em bloco (Swiss) */
.metagrid { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin-top: clamp(1.2rem,2.6vh,1.9rem); }
.metagrid .m .mk { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.metagrid .m .mv { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem,0.9rem+0.5vw,1.25rem); margin-top: 0.2rem; }

/* ==========================================================================
   Cover
   ========================================================================== */
.cover-mark { display: flex; flex-direction: column; align-items: center; gap: 0.05em; }
.cover-mark .amp { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-cover); line-height: 0.86; letter-spacing: -0.03em; }
.cover-mark .kmk { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem,0.9rem+3vw,3rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--red); }
.panel--photo .cover-mark .amp, .panel--photo .cover-mark .kmk { text-shadow: 0 4px 40px rgba(0,0,0,0.5); }
.cover-x { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-small); letter-spacing: 0.36em; text-transform: uppercase; color: var(--cream-faint); margin: 0.35em 0; }
.tagline { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: 0.24em;
  font-size: clamp(0.78rem,0.66rem+0.5vw,1rem); line-height: 1.4; color: var(--cream); margin-top: clamp(1.2rem,2.6vh,1.9rem); text-shadow: 0 1px 16px rgba(0,0,0,0.6); }
.panel.in .tagline { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%,100%{opacity:.66} 50%{opacity:1} }
.cover-meta { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-soft); margin-top: clamp(1.1rem,2.4vh,1.6rem); text-shadow: 0 1px 14px rgba(0,0,0,0.6); }
.cover-meta b { color: var(--cream); font-weight: 400; border-bottom: 1px solid var(--red); padding-bottom: 1px; }

.scroll-hint { position: absolute; left: 50%; bottom: clamp(1.2rem,4vh,2.2rem); transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-faint); }
.scroll-hint i { width: 1px; height: 34px; background: currentColor; transform-origin: top; animation: hintline 2s var(--ease) infinite; }
@keyframes hintline { 0%,100%{transform:scaleY(.3);opacity:.35} 50%{transform:scaleY(1);opacity:1} }

/* ==========================================================================
   Devices — folio + registration marks (Swiss)
   ========================================================================== */
.folio { position: absolute; top: calc(var(--topbar-h) + 0.5rem); left: var(--pad-x); z-index: 4;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem,4vw,3.2rem); line-height: 0.8; color: var(--red); pointer-events: none; }
.regmark { position: absolute; z-index: 4; width: 15px; height: 15px; pointer-events: none; border-color: var(--line); }
.regmark.tl { top: calc(var(--topbar-h) + 0.6rem); left: 0.9rem; border-left: 1px solid; border-top: 1px solid; }
.regmark.br { bottom: 0.9rem; right: 0.9rem; border-right: 1px solid; border-bottom: 1px solid; }

/* ==========================================================================
   Reveal
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
[data-reveal].rin { opacity: 1; transform: none; }
[data-reveal][data-d="1"]{transition-delay:.05s}[data-reveal][data-d="2"]{transition-delay:.12s}
[data-reveal][data-d="3"]{transition-delay:.19s}[data-reveal][data-d="4"]{transition-delay:.26s}
[data-reveal][data-d="5"]{transition-delay:.33s}[data-reveal][data-d="6"]{transition-delay:.40s}
[data-reveal][data-d="7"]{transition-delay:.47s}[data-reveal][data-d="8"]{transition-delay:.54s}

/* ==========================================================================
   Stat cards / big stats (editorial — fio fino, sem caixa)
   ========================================================================== */
.stat-cards { display: grid; grid-template-columns: repeat(4, var(--col)); gap: clamp(1rem,2vw,2rem); margin-top: clamp(1.6rem,3.4vh,2.6rem); }
.stat-card { border-top: 1px solid var(--ink); padding-top: 0.85rem; }
.stat-card.hi { border-top-color: var(--red); }
.stat-card .num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-stat-sm); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-card.hi .num { color: var(--red); }
.stat-card .num .u { font-size: 0.5em; color: var(--red); margin-left: 0.06em; letter-spacing: 0; }
.stat-card.hi .num .u { color: var(--red); }
.stat-card .k { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.5rem; line-height: 1.35; }
.stat-card .sub { font-size: 0.82em; line-height: 1.4; color: var(--ink-soft); margin-top: 0.25rem; }

.bigstat { display: flex; flex-wrap: wrap; gap: clamp(1.6rem,4vw,3.4rem) clamp(2rem,5vw,4.4rem); align-items: flex-start; margin-top: clamp(1.6rem,3.4vh,2.4rem); }
.bigstat .item .num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-stat); line-height: 0.86; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bigstat .item .num .pre, .bigstat .item .num .u { color: var(--red); }
.bigstat .item .num .u { font-size: 0.42em; margin-left: 0.06em; }
.bigstat .item .k { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.55rem; max-width: 20ch; }

.mini-stats { display: flex; flex-wrap: wrap; gap: clamp(1.4rem,4vw,3rem); margin-top: clamp(1.3rem,3vh,2rem); }
.mini-stats .ms .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem,1rem+1.8vw,2.5rem); line-height: 0.9; font-variant-numeric: tabular-nums; }
.mini-stats .ms .n .u { color: var(--red); font-size: 0.5em; }
.mini-stats .ms .l { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.35rem; }

/* ==========================================================================
   Ranks (barra horizontal animada) — prova social / público
   ========================================================================== */
.ranks { margin-top: clamp(1.4rem,3vh,2rem); display: grid; gap: 0; }
.rk { display: grid; grid-template-columns: minmax(9em,1.1fr) 2.2fr auto; align-items: center; gap: 1rem;
  padding: 0.7rem 0; border-top: 1px solid var(--line); }
.rk:last-child { border-bottom: 1px solid var(--line); }
.rk .rk-l { font-weight: 500; }
.rk .rk-l .rk-s { display: block; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }
.rk .rk-track { height: 6px; background: var(--line-soft); position: relative; overflow: hidden; }
.rk .rk-fill { position: absolute; inset: 0 auto 0 0; width: var(--w,50%); background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .15s; }
.in .rk .rk-fill { transform: scaleX(1); }
.rk .rk-v { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; font-variant-numeric: tabular-nums; text-align: right; min-width: 3.4em; }
@media (max-width: 640px){ .rk { grid-template-columns: 1fr auto; } .rk .rk-track { display: none; } }

/* ==========================================================================
   Split (texto + imagem) — Keinemusik / &ME
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.6rem); align-items: center; width: 100%; }
.split.wide-l { grid-template-columns: 1.1fr 0.9fr; }
.split .fig { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--coal); }
.split .fig img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.14) sepia(0.05); transition: filter .6s var(--ease), transform 1s var(--ease); }
.split .fig::after { content: ""; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: multiply; transition: opacity .6s var(--ease);
  background-image: radial-gradient(rgba(0,0,0,0.85) 38%, transparent 46%); background-size: 4px 4px; }
@media (hover: hover) {
  .split .fig:hover img { filter: grayscale(0) contrast(1.02) sepia(0) saturate(1.05); }
  .split .fig:hover::after { opacity: 0; }
}
.split .fig .cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 0.7rem 0.9rem; font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream); background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent); width: 100%; }
@media (max-width: 760px){ .split, .split.wide-l { grid-template-columns: 1fr; } .split .fig { aspect-ratio: 16/10; } }

/* member list (Keinemusik crew) */
.crew { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 clamp(1.6rem,4vw,3.4rem); margin-top: clamp(1.2rem,2.6vh,1.8rem); }
.crew .cr { border-top: 1px solid var(--line); padding: 0.7rem 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.crew .cr .crn { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.crew .cr .crr { font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); text-align: right; }
@media (max-width: 640px){ .crew { grid-template-columns: 1fr; } }

/* ==========================================================================
   Feature columns / pillars / icards / steps
   ========================================================================== */
.cols { display: grid; gap: clamp(1.2rem,2.6vw,2.6rem); margin-top: clamp(1.5rem,3.2vh,2.3rem); }
.cols-3 { grid-template-columns: repeat(3,var(--col)); }
.cols-4 { grid-template-columns: repeat(4,var(--col)); }
@media (max-width: 820px){ .cols-3, .cols-4 { grid-template-columns: repeat(2,var(--col)); } }
@media (max-width: 520px){ .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.feat { border-top: 1.5px solid var(--red); padding-top: 0.85rem; }
.feat .ico { width: 26px; height: 26px; color: var(--red); margin-bottom: 0.8rem; }
/* ícone alinhado (inline) com o título — sem espaço vertical entre eles */
.feat .fh { display: flex; align-items: center; gap: 0.55rem; }
.feat .fh .ico { width: 22px; height: 22px; margin: 0; flex: none; }
.feat .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feat .ft { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem,1.3vw,1.35rem); line-height: 1.05; }
.feat .fd { font-size: 0.9em; line-height: 1.5; margin-top: 0.5rem; color: var(--ink-soft); }
.feat .fn { font-family: var(--font-display); font-weight: 700; font-size: 1.5em; color: var(--red); display: block; margin-bottom: 0.4rem; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.55rem; margin-top: clamp(1.2rem,2.6vh,1.8rem); }
.chip { font-family: var(--font-mono); font-size: 0.8em; padding: 0.5rem 0.9rem; border: 1px solid var(--line); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }

/* ==========================================================================
   Timeline (vertical) — história 2009 → 2026
   ========================================================================== */
.htl { position: relative; padding-left: 1.9rem; margin-top: clamp(1.2rem,2.6vh,1.8rem); }
.htl::before { content: ""; position: absolute; left: 4px; top: 0.7em; bottom: 0.7em; width: 1px; background: var(--line); }
.htl-row { position: relative; display: grid; grid-template-columns: 4.4em 1fr; gap: 1.1rem; align-items: baseline; padding: clamp(0.42rem,1vh,0.72rem) 0; }
.htl-row .yr { position: relative; font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.03em; color: var(--ink-faint); }
.htl-row .yr::before { content: ""; position: absolute; left: -1.9rem; top: 0.35em; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.htl-row.now .yr { color: var(--red); }
.htl-row.now .yr::before { width: 11px; height: 11px; left: calc(-1.9rem - 1.5px); background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent); }
.htl-row .th { font-family: var(--font-display); font-weight: 500; font-size: clamp(0.98rem,1.3vw,1.28rem); line-height: 1.12; }
.htl-row.now .th { font-weight: 700; }
.htl-row .th b { color: var(--red); font-weight: 700; }

/* ==========================================================================
   Photo strip / tiles
   ========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(0.5rem,1vw,0.8rem); margin-top: clamp(1.4rem,3vh,2rem); }
.tile { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--coal); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.16) sepia(0.05); transition: transform 1s var(--ease), filter .6s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: multiply; transition: opacity .6s var(--ease); background-image: radial-gradient(rgba(0,0,0,0.85) 38%, transparent 46%); background-size: 4px 4px; }
@media (hover: hover) {
  .tile:hover img { filter: grayscale(0) contrast(1.02) sepia(0) saturate(1.05); }
  .tile:hover::after { opacity: 0; }
}
.tile .tc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.6rem 0.9rem 0.85rem; color: var(--cream);
  display: flex; flex-direction: column; gap: 0.2rem; background: linear-gradient(0deg, rgba(0,0,0,0.82), transparent); }
.tile .tn { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem,1.4vw,1.25rem); letter-spacing: -0.01em; line-height: 1; }
.tile .td { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream-soft); line-height: 1.3; }
.tile:hover img { transform: scale(1.04); }
@media (max-width:640px){ .tiles { grid-template-columns: 1fr 1fr; } }

/* mapa esquemático */
.plan { position: relative; margin-top: clamp(1.4rem,3vh,2rem); border: 1px solid var(--line); aspect-ratio: 16/7; overflow: hidden; }
.plan img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.4) brightness(0.85) sepia(0.1); }
.plan .pin { position: absolute; transform: translate(-50%,-50%); z-index: 2; display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cream); text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.plan .pin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(225,38,28,0.3); flex: none; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; margin-top: 1rem; font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }

/* ==========================================================================
   Topbar (marca + progresso + índice)
   ========================================================================== */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 90;
  display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1rem,4vw,2.2rem);
  pointer-events: none; mix-blend-mode: normal; transition: color .4s var(--ease); color: var(--ink); }
.topbar.on-dark { color: var(--cream); }
.topbar > * { pointer-events: auto; }
.tb-brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: currentColor; opacity: 0.8; }
.tb-brand b { opacity: 1; color: var(--red); }
.tb-right { display: flex; align-items: center; gap: clamp(0.8rem,2vw,1.4rem); }
.tb-progress { width: clamp(48px,8vw,110px); height: 2px; background: color-mix(in srgb, currentColor 22%, transparent); position: relative; overflow: hidden; }
.tb-progress i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--red); transition: width .25s var(--ease); }
.tb-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: currentColor; opacity: 0.85; font-variant-numeric: tabular-nums; }
.btn-index { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; background: none;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); color: inherit; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.42rem 0.8rem; transition: background .2s, color .2s; }
.btn-index:hover { background: var(--red); border-color: var(--red); color: var(--red-ink); }
@media (max-width: 640px){ .tb-brand .tag { display: none; } .tb-progress { display: none; } }

/* nav lateral (dots) + setas */
.dots { position: fixed; right: clamp(0.8rem,2.4vw,1.5rem); top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 0.65rem; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 30%, transparent); opacity: 0.5; cursor: pointer; transition: all .3s var(--ease); }
.dots.on-dark i { background: color-mix(in srgb, var(--cream) 40%, transparent); }
.dots i.on { background: var(--red); opacity: 1; transform: scale(1.4); }
@media (max-width: 860px){ .dots { display: none; } }

/* ==========================================================================
   Index overlay
   ========================================================================== */
.overlay { position: fixed; inset: 0; z-index: 130; background: var(--coal); color: var(--cream);
  display: flex; flex-direction: column; padding: clamp(1.4rem,5vw,3.5rem); opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s; overflow-y: auto; }
.overlay.open { opacity: 1; visibility: visible; }
.overlay-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(1.4rem,4vh,2.6rem); }
.overlay-head .ov-t { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem,3vw,2.2rem); }
.ov-close { background: none; border: 1px solid rgba(242,236,225,0.3); color: inherit; cursor: pointer; width: 44px; height: 44px; font-size: 1.1rem; }
.ov-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.4rem,3vw,3.4rem); align-items: start; }
.ov-act .ov-act-t { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); padding-bottom: 0.6rem; border-bottom: 1px solid rgba(242,236,225,0.22); margin-bottom: 0.25rem; }
.ov-link { display: grid; grid-template-columns: 2.4em 1fr; gap: 0.6rem; align-items: baseline; padding: 0.5rem 0;
  cursor: pointer; transition: padding-left .25s var(--ease), color .2s; }
.ov-link:hover { padding-left: 0.4rem; color: var(--red); }
.ov-link .oi { font-family: var(--font-mono); font-size: 0.8em; color: var(--red); }
.ov-link .ol { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.95rem,1.4vw,1.15rem); line-height: 1.15; }
@media (max-width: 520px){ .ov-list { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Contato
   ========================================================================== */
.endc { margin-top: clamp(1.6rem,3.4vh,2.4rem); display: flex; flex-direction: column; gap: 0.9rem; }
.wrap.center .endc { align-items: center; }
.endc .en { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem,2vw,1.7rem); }
.endc .er { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-lede); }
.endc .er .ei { width: 1.05em; height: 1.05em; color: var(--red); flex: none; }
@media(hover:hover){ .endc a.er:hover { color: var(--red); } }
.cta { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); background: var(--red); padding: 0.9rem 1.6rem;
  margin-top: clamp(1.2rem,2.6vh,1.8rem); transition: transform .25s var(--ease), background .25s; }
.cta:hover { transform: translateY(-2px); background: var(--ink); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .panel.in .pbg-inner, .panel.in .tagline, .scroll-hint i { animation: none; }
  [data-reveal] { transition-duration: .3s; }
  .rk .rk-fill { transition: none; transform: scaleX(1); }
}