/* ==========================================================================
   blind digital — home v2
   ========================================================================== */

/* ==========================================================================
   Hero — faixa inteira animada, texto centralizado por cima
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(84vh, 760px);
  padding-block: clamp(64px, 8vw, 104px);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg canvas { width: 100%; height: 100%; }

/* véu de papel no centro: mantém a manchete legível sobre a animação */
.hero__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 52% 46% at 50% 50%,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 78%, transparent) 42%,
    transparent 74%
  );
}

.hero__in {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero .tag { margin-bottom: 26px; }
.hero h1 { margin-bottom: 26px; max-width: 16ch; }
.hero .lede { margin: 0 auto 36px; max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --- Decodificação: a palavra é indivisível, as letras animam dentro --- */
.decode { display: inline; }
.decode .wd { display: inline-block; white-space: nowrap; }
.decode .ch { display: inline-block; white-space: pre; }
.decode .ch.is-scrambling { color: var(--b2); opacity: .7; }

/* --- Leituras de telemetria nos cantos da faixa ------------------------ */
.read {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font-family: var(--f-mono);
  line-height: 1.35;
  white-space: nowrap;
  animation: readIn .9s var(--ease-out) both;
}
.read b { font-weight: 600; font-size: var(--t-sm); letter-spacing: -.02em; }
.read span { color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.read--a { top: clamp(72px, 12vh, 132px); left: max(var(--gutter), 6vw); animation-delay: 1.15s; }
.read--b { bottom: clamp(72px, 12vh, 132px); right: max(var(--gutter), 6vw); animation-delay: 1.4s; }
@keyframes readIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) { .read { display: none; } }

/* --- Telemetria: faixa própria abaixo do banner ------------------------ */
.strip { padding-bottom: clamp(24px, 4vw, 40px); }

.telemetry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.telemetry__cell { background: var(--paper); padding: 20px 22px; transition: background .4s var(--ease); }
.telemetry__cell:hover { background: var(--card); }
.telemetry__cell b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.telemetry__cell span { font-size: var(--t-sm); color: var(--ink-3); }
.telemetry__bar { height: 2px; margin-top: 12px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.telemetry__bar i {
  display: block; height: 100%;
  width: var(--v, 60%);
  background: linear-gradient(90deg, var(--b1), var(--b2));
  transform-origin: left;
  animation: barIn 1.4s var(--ease-out) both;
}
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   Fluxo — registro contínuo de eventos interceptados
   ========================================================================== */

.stream {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
  padding-block: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stream__track { display: flex; width: max-content; gap: 0; animation: drift 46s linear infinite; }
.stream:hover .stream__track { animation-play-state: paused; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.stream__item {
  display: inline-flex; align-items: center; gap: 10px;
  padding-inline: 26px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
  white-space: nowrap;
  border-right: 1px solid var(--line);
}
.stream__item em { font-style: normal; color: var(--ink-3); letter-spacing: .06em; }
.stream__item s { text-decoration: none; color: var(--b1); font-weight: 600; }

/* ==========================================================================
   Camadas — os três arcos se montam conforme o scroll
   ========================================================================== */

.layers__head { max-width: var(--measure); margin-bottom: clamp(36px, 5vw, 64px); }
.layers__head .tag { margin-bottom: 16px; }

.layers {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 940px) {
  .layers { grid-template-columns: 1fr; }
  .layers__viz { order: -1; max-width: 320px; margin-inline: auto; }
}

.layers__viz { position: relative; }
.layers__viz svg { width: 100%; overflow: visible; }
.layers__viz .arc { transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.layers.is-focus .arc { opacity: .12; }
.layers.is-focus .arc.on { opacity: 1; transform: scale(1.06); }

/* anel HUD girando atrás do símbolo */
.layers__ring {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px dashed var(--line-2);
  animation: slowSpin 44s linear infinite;
  pointer-events: none;
}
.layers__ring::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--b2);
}
@keyframes slowSpin { to { transform: rotate(360deg); } }

.layer {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0 16px;
  text-align: left;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  transition: border-color .4s var(--ease);
}
.layer:last-child { border-bottom: 1px solid var(--line); }
.layer:hover, .layer:focus-visible { border-top-color: var(--lc); }

.layer__i {
  grid-row: span 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--lc);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--lc);
  margin-top: 3px;
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.layer:hover .layer__i { background: var(--lc); color: var(--on-brand); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lc) 14%, transparent); }

.layer__t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.layer__w {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.layer__d { color: var(--ink-2); margin-top: 7px; }

/* ==========================================================================
   Cobertura — painel de instrumentos
   ========================================================================== */

.cover { background: var(--paper-2); border-block: 1px solid var(--line); }

.cover__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 5vw, 60px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.cell {
  position: relative;
  background: var(--paper);
  padding: clamp(26px, 3vw, 36px);
  overflow: hidden;
  transition: background .5s var(--ease);
}
/* foco que acompanha o cursor dentro da célula */
.cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--cx, 50%) var(--cy, 50%), var(--wash), transparent 68%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.cell:hover::before { opacity: 1; }
.cell > * { position: relative; }

/* colchetes de canto — chrome de HUD */
.cell::after {
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--b2);
  border-right: 1px solid var(--b2);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease-out);
}
.cell:hover::after { opacity: 1; transform: none; }

.cell__n {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: .14em;
  display: block;
  margin-bottom: 20px;
}
.cell__ico { width: 32px; height: 32px; margin-bottom: 16px; color: var(--b1); }
.cell h4 { margin-bottom: 9px; }
.cell p { color: var(--ink-2); }

/* ==========================================================================
   Linhas — cada cartão com a própria tríade e borda cônica animada
   ========================================================================== */

.lines__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 5vw, 60px);
  align-items: start;
}

.line {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--sh-1);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.line:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }

/* borda: 1px sólido em repouso, gradiente cônico girando no hover */
.line::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: background .5s var(--ease);
}
.line:hover::before, .line--lead::before {
  background: conic-gradient(from var(--spin), var(--b3), var(--b2), var(--b1), var(--b2), var(--b3));
  animation: spin 5s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }

.line__flag {
  position: absolute;
  top: -10px; left: 26px;
  padding: 3px 11px;
  border-radius: var(--r-full);
  background: var(--b1);
  color: var(--on-brand);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.line__sym { width: 38px; height: auto; margin-bottom: 18px; transition: transform .5s var(--ease-out); }
.line:hover .line__sym { transform: rotate(-8deg) scale(1.08); }

.line__name { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); letter-spacing: -.04em; }
.line__for { color: var(--ink-3); font-size: var(--t-sm); margin-bottom: 22px; }

.line__price { display: flex; align-items: baseline; gap: 5px; }
.line__price b { font-family: var(--f-display); font-weight: 700; font-size: 2.05rem; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.line__price span { color: var(--ink-3); font-size: var(--t-sm); }

.line__cap { margin: 18px 0 22px; padding: 13px 15px; border-radius: var(--r-md); background: var(--wash); }
.line__cap small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.line__cap b { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); letter-spacing: -.035em; color: var(--b1); }

.line ul { list-style: none; display: grid; gap: 10px; margin-bottom: 26px; }
.line li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.line li svg { width: 14px; height: 14px; margin-top: 4px; color: var(--b2); }
.line .btn { margin-top: auto; }

/* ==========================================================================
   Dúvidas — <details> nativo
   ========================================================================== */

.faq { background: var(--paper-2); border-block: 1px solid var(--line); }
.faq__list { margin-top: clamp(30px, 4vw, 48px); border-top: 1px solid var(--line); }

.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: -.03em;
  transition: color .35s var(--ease);
}
.qa summary:hover { color: var(--b1); }
.qa__x { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ink-3); transition: transform .45s var(--ease-out), color .35s var(--ease); }
.qa[open] .qa__x { transform: rotate(135deg); color: var(--b1); }
.qa__a { padding-bottom: 26px; max-width: 72ch; color: var(--ink-2); animation: qaIn .45s var(--ease-out); }
@keyframes qaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Chamada final
   ========================================================================== */

.cta { padding-block: clamp(72px, 9vw, 128px); }
.cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 34px);
  background: var(--ink-bg);
  color: var(--on-ink);
  padding: clamp(48px, 7vw, 92px) clamp(28px, 5vw, 64px);
  text-align: center;
  isolation: isolate;
}
.cta__panel h2 { margin-bottom: 18px; }
.cta__panel .thin { color: var(--on-ink-2); }
.cta__panel p { color: var(--on-ink-2); max-width: 48ch; margin: 0 auto 34px; }
.cta__panel .btn--brand { background: var(--b2); color: var(--ink); }
.cta__panel .btn--brand:hover { background: var(--b3); }

/* varredura de radar atravessando o painel */
.cta__scan {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 120%, color-mix(in srgb, var(--b1) 50%, transparent), transparent 68%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 74px);
}
.cta__sweep {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--b2) 22%, transparent) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: sweep 7s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-70%); } 60%,100% { transform: translateX(70%); } }

/* ==========================================================================
   Rodapé
   ========================================================================== */

.foot { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 76px) 30px; }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(118px, 1fr));
  gap: clamp(28px, 4vw, 52px);
}
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

.foot__brand img { height: 40px; width: auto; margin-bottom: 18px; }
.foot__brand p { color: var(--ink-3); font-size: var(--t-sm); max-width: 34ch; }
.foot h5 { font-size: var(--t-sm); margin-bottom: 15px; }
.foot ul { list-style: none; display: grid; gap: 10px; font-size: var(--t-sm); color: var(--ink-2); }
.foot ul a { transition: color .3s var(--ease); }
.foot ul a:hover { color: var(--b1); }

.foot__bar {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ==========================================================================
   Primeira dobra — proposta de valor
   ========================================================================== */

/* A manchete tem duas frases longas. A escala global (--t-3xl) foi calibrada
   para títulos curtos; aqui ela precisa de uma própria, menor e mais apertada,
   senão a primeira dobra vira só a manchete.                                 */
.hero h1 {
  font-size: clamp(2rem, 1.05rem + 3.5vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  max-width: 17ch;
  margin-inline: auto;
}
.hero__second {
  display: block;
  margin-top: .18em;
  font-weight: 400;
  font-size: .82em;
  color: var(--ink-2);
  letter-spacing: -.035em;
}
.hero .lede { font-size: var(--t-base); max-width: 46ch; }

@media (max-width: 560px) {
  .hero h1 { max-width: 13ch; }
  .hero .lede { font-size: var(--t-sm); }
}

.hero__pillars {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 40px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__pillars li { position: relative; }
.hero__pillars li + li::before {
  content: '';
  position: absolute;
  left: -15px; top: 50%;
  width: 3px; height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--b2);
}

/* ==========================================================================
   03. O que está em jogo
   ========================================================================== */

.stake { background: var(--paper-2); border-block: 1px solid var(--line); }

.stake__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 5vw, 56px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.loss {
  background: var(--paper);
  padding: clamp(26px, 3vw, 34px);
  transition: background .45s var(--ease);
}
.loss:hover { background: var(--card); }
.loss h3 {
  font-size: var(--t-md);
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--b1);
}
.loss p { font-size: var(--t-sm); color: var(--ink-2); }

.stake__close {
  margin-top: clamp(36px, 5vw, 56px);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.04em;
  line-height: 1.15;
}

/* ==========================================================================
   06. Fecho das três camadas
   ========================================================================== */

.beat {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.05em;
  line-height: 1.1;
}

/* ==========================================================================
   08. A pergunta
   ========================================================================== */

.ask {
  padding-block: clamp(80px, 11vw, 150px);
  background: var(--ink-bg);
  color: var(--on-ink);
  text-align: center;
}
.ask__in { max-width: 900px; }
.ask h2 { font-size: var(--t-2xl); margin-bottom: 36px; }
.ask .thin { color: var(--on-ink-2); }

.ask__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 40px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.ask__list li { transition: color .4s var(--ease); }
.ask__list li:hover { color: var(--institutional-3); }

.ask__turn {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
}

/* ==========================================================================
   13. Confiança
   ========================================================================== */

.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}
.trust__item {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .45s var(--ease);
}
.trust__item:hover { border-color: var(--line-2); }
/* faixa hachurada marca o que ainda não foi preenchido */
.trust__item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: repeating-linear-gradient(
    135deg,
    var(--line-2) 0 6px,
    transparent 6px 12px
  );
}
.trust__item.is-set::before { background: var(--b2); }
.trust__item b::after {
  content: 'pendente';
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--paper-3);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: middle;
}
.trust__item.is-set b::after { display: none; }
.trust__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
  margin: 8px 0 8px;
}
.trust__item p { font-size: var(--t-sm); color: var(--ink-3); }
.trust__item .card__k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   15. Fechamento
   ========================================================================== */

.cta__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0 0 30px;
  font-family: var(--f-display);
  font-size: var(--t-md);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.cta__seal {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.35;
  margin-bottom: 32px;
  color: var(--on-ink-2);
}
.cta__seal b { display: inline-block; margin-top: 4px; font-weight: 800; color: var(--on-ink); letter-spacing: -.05em; }

/* fechamento: o substantivo carrega o peso */
.cta__list b { font-weight: 700; color: var(--on-ink); }

/* ==========================================================================
   03. Perdas — numeração e revelação progressiva
   ========================================================================== */

.loss { position: relative; counter-increment: perda; }
.stake__grid { counter-reset: perda; }
.loss::before {
  content: counter(perda, decimal-leading-zero);
  position: absolute;
  top: clamp(20px, 2.4vw, 26px);
  right: clamp(20px, 2.4vw, 26px);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--line-2);
  transition: color .45s var(--ease);
}
.loss:hover::before { color: var(--b2); }
.loss h3 { padding-right: 34px; }

/* ==========================================================================
   08. A pergunta — a lista respira mais
   ========================================================================== */

.ask__list li {
  position: relative;
  padding-bottom: 4px;
}
.ask__list li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--institutional-3);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease-out);
}
.ask__list li:hover::after { transform: scaleX(1); }

/* ==========================================================================
   Ritmo entre seções: alterna a superfície para não virar uma coluna só
   ========================================================================== */

.what { background: var(--paper-2); border-block: 1px solid var(--line); }
.forwho { background: var(--paper-2); border-block: 1px solid var(--line); }

/* ==========================================================================
   02. O mundo mudou — antes · hoje
   ========================================================================== */

.shift__head { max-width: var(--measure); margin-bottom: clamp(44px, 6vw, 76px); }
.shift__head .tag { margin-bottom: 18px; }
.shift__head h2 { margin-bottom: 14px; }

/* --- o par ---------------------------------------------------------------- */
.era {
  display: grid;
  grid-template-columns: minmax(0, .78fr) auto minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-block: 1px solid var(--line);
  margin-bottom: clamp(44px, 6vw, 72px);
}
@media (max-width: 860px) {
  .era { grid-template-columns: 1fr; gap: 28px; }
}

.era__label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.era__col--now .era__label { color: var(--b1); }

.era__text {
  font-size: var(--t-md);
  color: var(--ink-3);
  line-height: 1.45;
}
.era__col--then .era__word { color: var(--ink-2); }
.era__col--now .era__text { color: var(--ink-2); margin-bottom: 10px; }

/* divisor: a linha que separa as duas eras */
.era__split {
  position: relative;
  align-self: stretch;
  width: 1px;
  background: var(--line);
  min-height: 90px;
}
.era__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--b2);
  box-shadow: 0 0 0 5px var(--paper);
}
.era__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--b2);
  opacity: .45;
  animation: eraPulse 3.4s var(--ease) infinite;
}
@keyframes eraPulse {
  0%, 100% { transform: scale(1);   opacity: .45; }
  50%      { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 860px) {
  .era__split { width: 100%; height: 1px; min-height: 0; }
  .era__dot { top: 50%; left: 22px; }
}

/* --- a palavra que troca --------------------------------------------------- */
.cycle { position: relative; }

.cycle__list {
  list-style: none;
  position: relative;
  height: 1.16em;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 4vw, 4.2rem);
  line-height: 1.16;
  letter-spacing: -.05em;
}

.cycle__item {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.42em);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
}
.cycle__item.is-on {
  opacity: 1;
  transform: none;
}
/* a palavra que sai desce, a que entra sobe */
.cycle__item.is-out {
  opacity: 0;
  transform: translateY(-.42em);
}

/* cada palavra puxa uma cor da tríade, em rodízio */
.cycle__item:nth-child(3n+1) { color: var(--institutional-2); }
.cycle__item:nth-child(3n+2) { color: var(--institutional-1); }
.cycle__item:nth-child(3n+3) { color: var(--institutional-3); }

.cycle__item::after { content: '.'; color: var(--line-2); }

/* trilho de progresso: mostra quanto falta para a próxima */
.cycle__track {
  margin-top: 18px;
  height: 2px;
  width: min(240px, 60%);
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
}
.cycle__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--institutional-1), var(--institutional-2));
  transform-origin: left;
  transform: scaleX(0);
}
.cycle.is-running .cycle__fill { animation: cycleFill 2.6s linear infinite; }
@keyframes cycleFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sem JS ou com movimento reduzido: as palavras viram lista legível */
@media (prefers-reduced-motion: reduce) {
  .cycle__list {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  }
  .cycle__item { position: static; opacity: 1; transform: none; }
  .cycle__track { display: none; }
  .era__dot::after { animation: none; }
}

/* --- o que cada um construiu ------------------------------------------------ */
.built {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.built__item {
  position: relative;
  background: var(--paper);
  padding: 26px 24px 24px;
  transition: background .45s var(--ease);
}
.built__item:hover { background: var(--card); }
.built__n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--line-2);
  margin-bottom: 16px;
  transition: color .45s var(--ease);
}
.built__item:hover .built__n { color: var(--b2); }
.built__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.04em;
  margin-bottom: 4px;
}
.built__item span:not(.built__n) { font-size: var(--t-sm); color: var(--ink-2); }

/* --- virada ----------------------------------------------------------------- */
.turn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
@media (max-width: 780px) { .turn { grid-template-columns: 1fr; gap: 24px; } }

.turn__text { font-size: var(--t-md); color: var(--ink-2); }
.turn__birth {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
  line-height: 1.12;
}

/* ==========================================================================
   05. O que é a Blind — as seis camadas como placas sobrepostas
   ========================================================================== */

.what__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .what__grid { grid-template-columns: 1fr; gap: 40px; } }

.what__text { position: sticky; top: 110px; }
@media (max-width: 900px) { .what__text { position: static; } }
.what__text .tag { margin-bottom: 18px; }
.what__text h2 { margin-bottom: 20px; }
.what__text .lede { margin-bottom: 28px; }

.what__close {
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.3;
}
.what__close .thin { display: block; margin-top: 6px; }

/* --- a pilha --------------------------------------------------------------- */
.plates__label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.plates__stack { list-style: none; display: grid; gap: 8px; }

.plate {
  --tint: color-mix(in srgb, var(--institutional-2) calc(6% + var(--i) * 5%), var(--card));
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 16px;
  align-items: baseline;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--institutional-1) calc(8% + var(--i) * 6%), var(--line));
  /* cada placa entra um pouco mais da margem: a pilha ganha profundidade */
  margin-left: calc(var(--i) * 10px);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), margin-left .5s var(--ease-out);
}
.plate:hover {
  margin-left: 0;
  transform: translateX(-4px);
  box-shadow: var(--sh-2);
  z-index: 2;
}
@media (max-width: 560px) { .plate { margin-left: calc(var(--i) * 5px); } }

.plate__n {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--institutional-1);
  opacity: .75;
}
.plate b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
}
.plate__d {
  grid-column: 2;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* ==========================================================================
   07. Para quem — faixas em movimento
   ========================================================================== */

.forwho__head { max-width: var(--measure); margin-bottom: clamp(36px, 5vw, 56px); }
.forwho__head .tag { margin-bottom: 18px; }

.rows {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(40px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rows__line { overflow: hidden; }
.rows__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: rowsRun 34s linear infinite;
}
.rows__line--back .rows__track { animation-direction: reverse; animation-duration: 40s; }
.rows:hover .rows__track { animation-play-state: paused; }

@keyframes rowsRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rows__track span {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.1rem + 3.4vw, 3.4rem);
  letter-spacing: -.05em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.rows__track span:nth-of-type(3n+2) { color: var(--institutional-1); }
.rows__track span:nth-of-type(3n+3) { color: var(--institutional-3); }
.rows__track span:hover { color: var(--institutional-2); }

/* marcador entre as palavras */
.rows__track i {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .rows__track { animation: none; flex-wrap: wrap; width: auto; }
  .rows { mask-image: none; -webkit-mask-image: none; }
}

/* --- fecho ------------------------------------------------------------------ */
.forwho__end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
@media (max-width: 780px) { .forwho__end { grid-template-columns: 1fr; gap: 22px; } }

.forwho__close { font-size: var(--t-md); color: var(--ink-2); }
.forwho__beat {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.25;
}
.forwho__beat .thin { display: block; margin-top: 4px; }

/* ==========================================================================
   06. Fecho das três camadas
   ========================================================================== */

.beat {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.05em;
  line-height: 1.1;
}

/* ==========================================================================
   08. A pergunta
   ========================================================================== */

.ask {
  padding-block: clamp(80px, 11vw, 150px);
  background: var(--ink-bg);
  color: var(--on-ink);
  text-align: center;
}
.ask__in { max-width: 900px; }
.ask h2 { font-size: var(--t-2xl); margin-bottom: 36px; }
.ask .thin { color: var(--on-ink-2); }

.ask__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 40px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.ask__list li { transition: color .4s var(--ease); }
.ask__list li:hover { color: var(--institutional-3); }

.ask__turn {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
}

/* ==========================================================================
   13. Confiança
   ========================================================================== */

.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}
.trust__item {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .45s var(--ease);
}
.trust__item:hover { border-color: var(--line-2); }
/* faixa hachurada marca o que ainda não foi preenchido */
.trust__item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: repeating-linear-gradient(
    135deg,
    var(--line-2) 0 6px,
    transparent 6px 12px
  );
}
.trust__item.is-set::before { background: var(--b2); }
.trust__item b::after {
  content: 'pendente';
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--paper-3);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: middle;
}
.trust__item.is-set b::after { display: none; }
.trust__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
  margin: 8px 0 8px;
}
.trust__item p { font-size: var(--t-sm); color: var(--ink-3); }
.trust__item .card__k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   15. Fechamento
   ========================================================================== */

.cta__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0 0 30px;
  font-family: var(--f-display);
  font-size: var(--t-md);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.cta__seal {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.35;
  margin-bottom: 32px;
  color: var(--on-ink-2);
}
.cta__seal b { display: inline-block; margin-top: 4px; font-weight: 800; color: var(--on-ink); letter-spacing: -.05em; }

/* fechamento: o substantivo carrega o peso */
.cta__list b { font-weight: 700; color: var(--on-ink); }

/* ==========================================================================
   03. Perdas — numeração e revelação progressiva
   ========================================================================== */

.loss { position: relative; counter-increment: perda; }
.stake__grid { counter-reset: perda; }
.loss::before {
  content: counter(perda, decimal-leading-zero);
  position: absolute;
  top: clamp(20px, 2.4vw, 26px);
  right: clamp(20px, 2.4vw, 26px);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--line-2);
  transition: color .45s var(--ease);
}
.loss:hover::before { color: var(--b2); }
.loss h3 { padding-right: 34px; }

/* ==========================================================================
   08. A pergunta — a lista respira mais
   ========================================================================== */

.ask__list li {
  position: relative;
  padding-bottom: 4px;
}
.ask__list li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--institutional-3);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease-out);
}
.ask__list li:hover::after { transform: scaleX(1); }

/* ==========================================================================
   Ritmo entre seções: alterna a superfície para não virar uma coluna só
   ========================================================================== */

.what { background: var(--paper-2); border-block: 1px solid var(--line); }
.forwho { background: var(--paper-2); border-block: 1px solid var(--line); }

/* ==========================================================================
   02. O mundo mudou — antes · hoje
   ========================================================================== */

.shift__head { max-width: var(--measure); margin-bottom: clamp(44px, 6vw, 76px); }
.shift__head .tag { margin-bottom: 18px; }
.shift__head h2 { margin-bottom: 14px; }

/* --- o par ---------------------------------------------------------------- */
.era {
  display: grid;
  grid-template-columns: minmax(0, .78fr) auto minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-block: 1px solid var(--line);
  margin-bottom: clamp(44px, 6vw, 72px);
}
@media (max-width: 860px) {
  .era { grid-template-columns: 1fr; gap: 28px; }
}

.era__label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.era__col--now .era__label { color: var(--b1); }

.era__text {
  font-size: var(--t-md);
  color: var(--ink-3);
  line-height: 1.45;
}
.era__col--then .era__word { color: var(--ink-2); }
.era__col--now .era__text { color: var(--ink-2); margin-bottom: 10px; }

/* divisor: a linha que separa as duas eras */
.era__split {
  position: relative;
  align-self: stretch;
  width: 1px;
  background: var(--line);
  min-height: 90px;
}
.era__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--b2);
  box-shadow: 0 0 0 5px var(--paper);
}
.era__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--b2);
  opacity: .45;
  animation: eraPulse 3.4s var(--ease) infinite;
}
@keyframes eraPulse {
  0%, 100% { transform: scale(1);   opacity: .45; }
  50%      { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 860px) {
  .era__split { width: 100%; height: 1px; min-height: 0; }
  .era__dot { top: 50%; left: 22px; }
}

/* --- a palavra que troca --------------------------------------------------- */
.cycle { position: relative; }

.cycle__list {
  list-style: none;
  position: relative;
  height: 1.16em;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 4vw, 4.2rem);
  line-height: 1.16;
  letter-spacing: -.05em;
}

.cycle__item {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.42em);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
}
.cycle__item.is-on {
  opacity: 1;
  transform: none;
}
/* a palavra que sai desce, a que entra sobe */
.cycle__item.is-out {
  opacity: 0;
  transform: translateY(-.42em);
}

/* cada palavra puxa uma cor da tríade, em rodízio */
.cycle__item:nth-child(3n+1) { color: var(--institutional-2); }
.cycle__item:nth-child(3n+2) { color: var(--institutional-1); }
.cycle__item:nth-child(3n+3) { color: var(--institutional-3); }

.cycle__item::after { content: '.'; color: var(--line-2); }

/* trilho de progresso: mostra quanto falta para a próxima */
.cycle__track {
  margin-top: 18px;
  height: 2px;
  width: min(240px, 60%);
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
}
.cycle__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--institutional-1), var(--institutional-2));
  transform-origin: left;
  transform: scaleX(0);
}
.cycle.is-running .cycle__fill { animation: cycleFill 2.6s linear infinite; }
@keyframes cycleFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sem JS ou com movimento reduzido: as palavras viram lista legível */
@media (prefers-reduced-motion: reduce) {
  .cycle__list {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  }
  .cycle__item { position: static; opacity: 1; transform: none; }
  .cycle__track { display: none; }
  .era__dot::after { animation: none; }
}

/* --- o que cada um construiu ------------------------------------------------ */
.built {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.built__item {
  position: relative;
  background: var(--paper);
  padding: 26px 24px 24px;
  transition: background .45s var(--ease);
}
.built__item:hover { background: var(--card); }
.built__n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--line-2);
  margin-bottom: 16px;
  transition: color .45s var(--ease);
}
.built__item:hover .built__n { color: var(--b2); }
.built__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.04em;
  margin-bottom: 4px;
}
.built__item span:not(.built__n) { font-size: var(--t-sm); color: var(--ink-2); }

/* --- virada ----------------------------------------------------------------- */
.turn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
@media (max-width: 780px) { .turn { grid-template-columns: 1fr; gap: 24px; } }

.turn__text { font-size: var(--t-md); color: var(--ink-2); }
.turn__birth {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
  line-height: 1.12;
}

/* ==========================================================================
   05. O que é a Blind — as seis camadas como placas sobrepostas
   ========================================================================== */

.what__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .what__grid { grid-template-columns: 1fr; gap: 40px; } }

.what__text { position: sticky; top: 110px; }
@media (max-width: 900px) { .what__text { position: static; } }
.what__text .tag { margin-bottom: 18px; }
.what__text h2 { margin-bottom: 20px; }
.what__text .lede { margin-bottom: 28px; }

.what__close {
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.3;
}
.what__close .thin { display: block; margin-top: 6px; }

/* --- a pilha --------------------------------------------------------------- */
.plates__label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.plates__stack { list-style: none; display: grid; gap: 8px; }

.plate {
  --tint: color-mix(in srgb, var(--institutional-2) calc(6% + var(--i) * 5%), var(--card));
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 16px;
  align-items: baseline;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--institutional-1) calc(8% + var(--i) * 6%), var(--line));
  /* cada placa entra um pouco mais da margem: a pilha ganha profundidade */
  margin-left: calc(var(--i) * 10px);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), margin-left .5s var(--ease-out);
}
.plate:hover {
  margin-left: 0;
  transform: translateX(-4px);
  box-shadow: var(--sh-2);
  z-index: 2;
}
@media (max-width: 560px) { .plate { margin-left: calc(var(--i) * 5px); } }

.plate__n {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--institutional-1);
  opacity: .75;
}
.plate b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
}
.plate__d {
  grid-column: 2;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* ==========================================================================
   07. Para quem — faixas em movimento
   ========================================================================== */

.forwho__head { max-width: var(--measure); margin-bottom: clamp(36px, 5vw, 56px); }
.forwho__head .tag { margin-bottom: 18px; }

.rows {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(40px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rows__line { overflow: hidden; }
.rows__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: rowsRun 34s linear infinite;
}
.rows__line--back .rows__track { animation-direction: reverse; animation-duration: 40s; }
.rows:hover .rows__track { animation-play-state: paused; }

@keyframes rowsRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rows__track span {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.1rem + 3.4vw, 3.4rem);
  letter-spacing: -.05em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.rows__track span:nth-of-type(3n+2) { color: var(--institutional-1); }
.rows__track span:nth-of-type(3n+3) { color: var(--institutional-3); }
.rows__track span:hover { color: var(--institutional-2); }

/* marcador entre as palavras */
.rows__track i {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .rows__track { animation: none; flex-wrap: wrap; width: auto; }
  .rows { mask-image: none; -webkit-mask-image: none; }
}

/* --- fecho ------------------------------------------------------------------ */
.forwho__end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
@media (max-width: 780px) { .forwho__end { grid-template-columns: 1fr; gap: 22px; } }

.forwho__close { font-size: var(--t-md); color: var(--ink-2); }
.forwho__beat {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.25;
}
.forwho__beat .thin { display: block; margin-top: 4px; }

/* ==========================================================================
   04. A nova realidade
   ========================================================================== */

.reality { border-bottom: 1px solid var(--line); overflow: hidden; }

.reality__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .reality__grid { grid-template-columns: 1fr; gap: 48px; } }

.reality__in { max-width: 620px; }
.reality__in .tag { margin-bottom: 18px; }
.reality__in h2 { margin-bottom: 22px; }

.threats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.threats li {
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out);
}
.threats li:hover {
  border-color: var(--institutional-3);
  color: var(--institutional-1);
  transform: translateY(-2px);
}

.reality__beat {
  margin: 32px 0 16px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.04em;
  line-height: 1.15;
}
.reality__beat .thin { display: block; }
.reality__note {
  font-size: var(--t-sm);
  color: var(--ink-3);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 44ch;
}

/* ==========================================================================
   06. Fecho das três camadas
   ========================================================================== */

.beat {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.05em;
  line-height: 1.1;
}

/* ==========================================================================
   08. A pergunta
   ========================================================================== */

.ask {
  padding-block: clamp(80px, 11vw, 150px);
  background: var(--ink-bg);
  color: var(--on-ink);
  text-align: center;
}
.ask__in { max-width: 900px; }
.ask h2 { font-size: var(--t-2xl); margin-bottom: 36px; }
.ask .thin { color: var(--on-ink-2); }

.ask__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 40px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.ask__list li { transition: color .4s var(--ease); }
.ask__list li:hover { color: var(--institutional-3); }

.ask__turn {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
}

/* ==========================================================================
   13. Confiança
   ========================================================================== */

.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}
.trust__item {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .45s var(--ease);
}
.trust__item:hover { border-color: var(--line-2); }
/* faixa hachurada marca o que ainda não foi preenchido */
.trust__item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: repeating-linear-gradient(
    135deg,
    var(--line-2) 0 6px,
    transparent 6px 12px
  );
}
.trust__item.is-set::before { background: var(--b2); }
.trust__item b::after {
  content: 'pendente';
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--paper-3);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: middle;
}
.trust__item.is-set b::after { display: none; }
.trust__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
  margin: 8px 0 8px;
}
.trust__item p { font-size: var(--t-sm); color: var(--ink-3); }
.trust__item .card__k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   15. Fechamento
   ========================================================================== */

.cta__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0 0 30px;
  font-family: var(--f-display);
  font-size: var(--t-md);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.cta__seal {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.35;
  margin-bottom: 32px;
  color: var(--on-ink-2);
}
.cta__seal b { display: inline-block; margin-top: 4px; font-weight: 800; color: var(--on-ink); letter-spacing: -.05em; }

/* fechamento: o substantivo carrega o peso */
.cta__list b { font-weight: 700; color: var(--on-ink); }

/* ==========================================================================
   03. Perdas — numeração e revelação progressiva
   ========================================================================== */

.loss { position: relative; counter-increment: perda; }
.stake__grid { counter-reset: perda; }
.loss::before {
  content: counter(perda, decimal-leading-zero);
  position: absolute;
  top: clamp(20px, 2.4vw, 26px);
  right: clamp(20px, 2.4vw, 26px);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--line-2);
  transition: color .45s var(--ease);
}
.loss:hover::before { color: var(--b2); }
.loss h3 { padding-right: 34px; }

/* ==========================================================================
   08. A pergunta — a lista respira mais
   ========================================================================== */

.ask__list li {
  position: relative;
  padding-bottom: 4px;
}
.ask__list li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--institutional-3);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease-out);
}
.ask__list li:hover::after { transform: scaleX(1); }

/* ==========================================================================
   Ritmo entre seções: alterna a superfície para não virar uma coluna só
   ========================================================================== */

.what { background: var(--paper-2); border-block: 1px solid var(--line); }
.forwho { background: var(--paper-2); border-block: 1px solid var(--line); }

/* ==========================================================================
   02. O mundo mudou — antes · hoje
   ========================================================================== */

.shift__head { max-width: var(--measure); margin-bottom: clamp(44px, 6vw, 76px); }
.shift__head .tag { margin-bottom: 18px; }
.shift__head h2 { margin-bottom: 14px; }

/* --- o par ---------------------------------------------------------------- */
.era {
  display: grid;
  grid-template-columns: minmax(0, .78fr) auto minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-block: 1px solid var(--line);
  margin-bottom: clamp(44px, 6vw, 72px);
}
@media (max-width: 860px) {
  .era { grid-template-columns: 1fr; gap: 28px; }
}

.era__label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.era__col--now .era__label { color: var(--b1); }

.era__text {
  font-size: var(--t-md);
  color: var(--ink-3);
  line-height: 1.45;
}
.era__col--then .era__word { color: var(--ink-2); }
.era__col--now .era__text { color: var(--ink-2); margin-bottom: 10px; }

/* divisor: a linha que separa as duas eras */
.era__split {
  position: relative;
  align-self: stretch;
  width: 1px;
  background: var(--line);
  min-height: 90px;
}
.era__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--b2);
  box-shadow: 0 0 0 5px var(--paper);
}
.era__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--b2);
  opacity: .45;
  animation: eraPulse 3.4s var(--ease) infinite;
}
@keyframes eraPulse {
  0%, 100% { transform: scale(1);   opacity: .45; }
  50%      { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 860px) {
  .era__split { width: 100%; height: 1px; min-height: 0; }
  .era__dot { top: 50%; left: 22px; }
}

/* --- a palavra que troca --------------------------------------------------- */
.cycle { position: relative; }

.cycle__list {
  list-style: none;
  position: relative;
  height: 1.16em;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 4vw, 4.2rem);
  line-height: 1.16;
  letter-spacing: -.05em;
}

.cycle__item {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.42em);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
}
.cycle__item.is-on {
  opacity: 1;
  transform: none;
}
/* a palavra que sai desce, a que entra sobe */
.cycle__item.is-out {
  opacity: 0;
  transform: translateY(-.42em);
}

/* cada palavra puxa uma cor da tríade, em rodízio */
.cycle__item:nth-child(3n+1) { color: var(--institutional-2); }
.cycle__item:nth-child(3n+2) { color: var(--institutional-1); }
.cycle__item:nth-child(3n+3) { color: var(--institutional-3); }

.cycle__item::after { content: '.'; color: var(--line-2); }

/* trilho de progresso: mostra quanto falta para a próxima */
.cycle__track {
  margin-top: 18px;
  height: 2px;
  width: min(240px, 60%);
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
}
.cycle__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--institutional-1), var(--institutional-2));
  transform-origin: left;
  transform: scaleX(0);
}
.cycle.is-running .cycle__fill { animation: cycleFill 2.6s linear infinite; }
@keyframes cycleFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sem JS ou com movimento reduzido: as palavras viram lista legível */
@media (prefers-reduced-motion: reduce) {
  .cycle__list {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  }
  .cycle__item { position: static; opacity: 1; transform: none; }
  .cycle__track { display: none; }
  .era__dot::after { animation: none; }
}

/* --- o que cada um construiu ------------------------------------------------ */
.built {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.built__item {
  position: relative;
  background: var(--paper);
  padding: 26px 24px 24px;
  transition: background .45s var(--ease);
}
.built__item:hover { background: var(--card); }
.built__n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--line-2);
  margin-bottom: 16px;
  transition: color .45s var(--ease);
}
.built__item:hover .built__n { color: var(--b2); }
.built__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.04em;
  margin-bottom: 4px;
}
.built__item span:not(.built__n) { font-size: var(--t-sm); color: var(--ink-2); }

/* --- virada ----------------------------------------------------------------- */
.turn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
@media (max-width: 780px) { .turn { grid-template-columns: 1fr; gap: 24px; } }

.turn__text { font-size: var(--t-md); color: var(--ink-2); }
.turn__birth {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
  line-height: 1.12;
}

/* ==========================================================================
   05. O que é a Blind — as seis camadas como placas sobrepostas
   ========================================================================== */

.what__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .what__grid { grid-template-columns: 1fr; gap: 40px; } }

.what__text { position: sticky; top: 110px; }
@media (max-width: 900px) { .what__text { position: static; } }
.what__text .tag { margin-bottom: 18px; }
.what__text h2 { margin-bottom: 20px; }
.what__text .lede { margin-bottom: 28px; }

.what__close {
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.3;
}
.what__close .thin { display: block; margin-top: 6px; }

/* --- a pilha --------------------------------------------------------------- */
.plates__label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.plates__stack { list-style: none; display: grid; gap: 8px; }

.plate {
  --tint: color-mix(in srgb, var(--institutional-2) calc(6% + var(--i) * 5%), var(--card));
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 16px;
  align-items: baseline;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--institutional-1) calc(8% + var(--i) * 6%), var(--line));
  /* cada placa entra um pouco mais da margem: a pilha ganha profundidade */
  margin-left: calc(var(--i) * 10px);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), margin-left .5s var(--ease-out);
}
.plate:hover {
  margin-left: 0;
  transform: translateX(-4px);
  box-shadow: var(--sh-2);
  z-index: 2;
}
@media (max-width: 560px) { .plate { margin-left: calc(var(--i) * 5px); } }

.plate__n {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--institutional-1);
  opacity: .75;
}
.plate b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
}
.plate__d {
  grid-column: 2;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* ==========================================================================
   07. Para quem — faixas em movimento
   ========================================================================== */

.forwho__head { max-width: var(--measure); margin-bottom: clamp(36px, 5vw, 56px); }
.forwho__head .tag { margin-bottom: 18px; }

.rows {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(40px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rows__line { overflow: hidden; }
.rows__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: rowsRun 34s linear infinite;
}
.rows__line--back .rows__track { animation-direction: reverse; animation-duration: 40s; }
.rows:hover .rows__track { animation-play-state: paused; }

@keyframes rowsRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rows__track span {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.1rem + 3.4vw, 3.4rem);
  letter-spacing: -.05em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.rows__track span:nth-of-type(3n+2) { color: var(--institutional-1); }
.rows__track span:nth-of-type(3n+3) { color: var(--institutional-3); }
.rows__track span:hover { color: var(--institutional-2); }

/* marcador entre as palavras */
.rows__track i {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .rows__track { animation: none; flex-wrap: wrap; width: auto; }
  .rows { mask-image: none; -webkit-mask-image: none; }
}

/* --- fecho ------------------------------------------------------------------ */
.forwho__end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
@media (max-width: 780px) { .forwho__end { grid-template-columns: 1fr; gap: 22px; } }

.forwho__close { font-size: var(--t-md); color: var(--ink-2); }
.forwho__beat {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.25;
}
.forwho__beat .thin { display: block; margin-top: 4px; }

/* ==========================================================================
   04. A nova realidade
   ========================================================================== */

.reality { border-bottom: 1px solid var(--line); overflow: hidden; }

.reality__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .reality__grid { grid-template-columns: 1fr; gap: 48px; } }

.reality__in { max-width: 620px; }
.reality__in .tag { margin-bottom: 18px; }
.reality__in h2 { margin-bottom: 22px; }

.threats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.threats li {
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out);
}
.threats li:hover {
  border-color: var(--institutional-3);
  color: var(--institutional-1);
  transform: translateY(-2px);
}

.reality__beat {
  margin: 32px 0 16px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.04em;
  line-height: 1.15;
}
.reality__beat .thin { display: block; }
.reality__note {
  font-size: var(--t-sm);
  color: var(--ink-3);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 44ch;
}

/* ==========================================================================
   O aparelho em 3D
   --------------------------------------------------------------------------
   Caixa de verdade em CSS 3D: seis faces, não uma imagem chapada. A rotação
   acompanha o scroll — quanto mais a seção sobe, mais o aparelho gira.
   ========================================================================== */

@property --spinY { syntax: '<angle>'; initial-value: -22deg; inherits: true; }

.stage {
  --spinY: -22deg;          /* atualizado pelo scroll */
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(400px, 52vw, 560px);
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

/* brilho difuso ao fundo, dando plano à cena */
.stage__glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--institutional-2) 16%, transparent),
    transparent 68%
  );
  filter: blur(14px);
}

.orbit {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(var(--spinY));
  transition: transform .12s linear;
}

/* --- corpo do aparelho ----------------------------------------------------- */
.device {
  --w: clamp(200px, 20vw, 258px);
  --h: calc(var(--w) * 2.06);
  --d: 11px;                              /* metade da espessura */
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}

.device__face, .device__edge {
  position: absolute;
  border-radius: 30px;
  background: var(--dev-shell);
}

.device__face--front {
  inset: 0;
  transform: translateZ(var(--d));
  padding: 9px;
  box-shadow:
    0 0 0 1px var(--dev-hair),
    0 30px 60px var(--dev-drop);
}
.device__face--back {
  inset: 0;
  transform: translateZ(calc(var(--d) * -1)) rotateY(180deg);
  background: var(--dev-back);
  box-shadow: 0 0 0 1px var(--dev-hair);
}

/* laterais: dão a espessura real da caixa */
.device__edge { background: linear-gradient(180deg, var(--paper-2), var(--paper-3)); }
.device__edge--left {
  top: 0; bottom: 0; left: 0;
  width: calc(var(--d) * 2);
  transform: translateX(calc(var(--d) * -1)) rotateY(-90deg);
  border-radius: 4px;
}
.device__edge--right {
  top: 0; bottom: 0; right: 0;
  width: calc(var(--d) * 2);
  transform: translateX(var(--d)) rotateY(90deg);
  border-radius: 4px;
}
.device__edge--top {
  left: 0; right: 0; top: 0;
  height: calc(var(--d) * 2);
  transform: translateY(calc(var(--d) * -1)) rotateX(90deg);
  border-radius: 4px;
}
.device__edge--bottom {
  left: 0; right: 0; bottom: 0;
  height: calc(var(--d) * 2);
  transform: translateY(var(--d)) rotateX(-90deg);
  border-radius: 4px;
}

/* --- tela ------------------------------------------------------------------ */
.screen {
  position: relative;
  height: 100%;
  border-radius: 23px;
  background: linear-gradient(170deg, var(--paper) 0%, var(--paper-2) 100%);
  overflow: hidden;
  padding: 26px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.screen__notch {
  position: absolute;
  top: 9px; left: 50%;
  width: 34%; height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--dev-drop);
}

.screen__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.screen__brand {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.05em;
  color: var(--ink);
}
.screen__pill {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-fg);
  font-family: var(--f-mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.screen__acct { display: flex; align-items: center; gap: 9px; }
.screen__ava {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--institutional-2), var(--institutional-1));
  flex: 0 0 auto;
}
.screen__id { display: grid; gap: 4px; flex: 1; }

.screen__bar { display: block; height: 5px; border-radius: 3px; background: var(--dev-bar); }
.screen__bar--w { width: 74%; }
.screen__bar--n { width: 44%; opacity: .6; }
.screen__bar--m { width: 62%; }
.screen__bar--s { width: 40%; }

/* escudo grande no meio da tela, pulsando devagar */
.screen__shield {
  margin: 4px auto 2px;
  width: 52%;
  color: var(--institutional-2);
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--institutional-2) 32%, transparent));
  animation: shieldBreathe 4.2s var(--ease) infinite;
}
.screen__shield svg { width: 100%; height: auto; }
@keyframes shieldBreathe {
  0%, 100% { transform: scale(1);    opacity: .92; }
  50%      { transform: scale(1.05); opacity: 1; }
}

.screen__rows { display: grid; gap: 8px; margin-top: auto; }
.screen__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  background: var(--dev-row);
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.dot--ok { background: var(--ok); }
.dot--live {
  background: var(--institutional-2);
  animation: dotBlink 2.2s var(--ease) infinite;
}
@keyframes dotBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* --- escudos orbitando ------------------------------------------------------ */
.guard {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(30px, 3.4vw, 42px);
  margin: -21px 0 0 -18px;
  color: var(--institutional-1);
  transform-style: preserve-3d;
  opacity: .9;
}
.guard svg { width: 100%; height: auto; }

/* cada escudo é empurrado para fora no eixo Z depois de girar: órbita real */
.guard--1 {
  transform: rotateY(0deg)   translateZ(178px) translateY(-118px) rotateY(0deg);
  color: var(--institutional-2);
}
.guard--2 {
  transform: rotateY(90deg)  translateZ(168px) translateY(48px) rotateY(-90deg);
  color: var(--institutional-1);
}
.guard--3 {
  transform: rotateY(190deg) translateZ(180px) translateY(-30px) rotateY(-190deg);
  color: var(--institutional-3);
}
.guard--4 {
  transform: rotateY(285deg) translateZ(172px) translateY(126px) rotateY(-285deg);
  color: var(--institutional-2);
}

/* anel no chão da cena, para o conjunto não flutuar solto */
.ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  margin: -200px 0 0 -200px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--institutional-1) 26%, transparent);
  transform: rotateX(90deg) translateZ(-230px);
  pointer-events: none;
}

@media (max-width: 900px) {
  .stage { min-height: 440px; }
  .guard--1 { transform: rotateY(0deg)   translateZ(140px) translateY(-96px)  rotateY(0deg); }
  .guard--2 { transform: rotateY(90deg)  translateZ(132px) translateY(38px)   rotateY(-90deg); }
  .guard--3 { transform: rotateY(190deg) translateZ(142px) translateY(-24px)  rotateY(-190deg); }
  .guard--4 { transform: rotateY(285deg) translateZ(136px) translateY(100px)  rotateY(-285deg); }
  .ring { width: 310px; height: 310px; margin: -155px 0 0 -155px; transform: rotateX(90deg) translateZ(-180px); }
}

/* Movimento reduzido: a cena para de frente, sem girar nem pulsar */
@media (prefers-reduced-motion: reduce) {
  .orbit { transform: rotateX(6deg) rotateY(-14deg) !important; transition: none; }
  .screen__shield, .dot--live { animation: none; }
}

/* ==========================================================================
   06. Fecho das três camadas
   ========================================================================== */

.beat {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.05em;
  line-height: 1.1;
}

/* ==========================================================================
   08. A pergunta
   ========================================================================== */

.ask {
  padding-block: clamp(80px, 11vw, 150px);
  background: var(--ink-bg);
  color: var(--on-ink);
  text-align: center;
}
.ask__in { max-width: 900px; }
.ask h2 { font-size: var(--t-2xl); margin-bottom: 36px; }
.ask .thin { color: var(--on-ink-2); }

.ask__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 40px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.ask__list li { transition: color .4s var(--ease); }
.ask__list li:hover { color: var(--institutional-3); }

.ask__turn {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
}

/* ==========================================================================
   13. Confiança
   ========================================================================== */

.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}
.trust__item {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .45s var(--ease);
}
.trust__item:hover { border-color: var(--line-2); }
/* faixa hachurada marca o que ainda não foi preenchido */
.trust__item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: repeating-linear-gradient(
    135deg,
    var(--line-2) 0 6px,
    transparent 6px 12px
  );
}
.trust__item.is-set::before { background: var(--b2); }
.trust__item b::after {
  content: 'pendente';
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--paper-3);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: middle;
}
.trust__item.is-set b::after { display: none; }
.trust__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
  margin: 8px 0 8px;
}
.trust__item p { font-size: var(--t-sm); color: var(--ink-3); }
.trust__item .card__k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   15. Fechamento
   ========================================================================== */

.cta__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0 0 30px;
  font-family: var(--f-display);
  font-size: var(--t-md);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.cta__seal {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.35;
  margin-bottom: 32px;
  color: var(--on-ink-2);
}
.cta__seal b { display: inline-block; margin-top: 4px; font-weight: 800; color: var(--on-ink); letter-spacing: -.05em; }

/* fechamento: o substantivo carrega o peso */
.cta__list b { font-weight: 700; color: var(--on-ink); }

/* ==========================================================================
   03. Perdas — numeração e revelação progressiva
   ========================================================================== */

.loss { position: relative; counter-increment: perda; }
.stake__grid { counter-reset: perda; }
.loss::before {
  content: counter(perda, decimal-leading-zero);
  position: absolute;
  top: clamp(20px, 2.4vw, 26px);
  right: clamp(20px, 2.4vw, 26px);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--line-2);
  transition: color .45s var(--ease);
}
.loss:hover::before { color: var(--b2); }
.loss h3 { padding-right: 34px; }

/* ==========================================================================
   08. A pergunta — a lista respira mais
   ========================================================================== */

.ask__list li {
  position: relative;
  padding-bottom: 4px;
}
.ask__list li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--institutional-3);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease-out);
}
.ask__list li:hover::after { transform: scaleX(1); }

/* ==========================================================================
   Ritmo entre seções: alterna a superfície para não virar uma coluna só
   ========================================================================== */

.what { background: var(--paper-2); border-block: 1px solid var(--line); }
.forwho { background: var(--paper-2); border-block: 1px solid var(--line); }

/* ==========================================================================
   02. O mundo mudou — antes · hoje
   ========================================================================== */

.shift__head { max-width: var(--measure); margin-bottom: clamp(44px, 6vw, 76px); }
.shift__head .tag { margin-bottom: 18px; }
.shift__head h2 { margin-bottom: 14px; }

/* --- o par ---------------------------------------------------------------- */
.era {
  display: grid;
  grid-template-columns: minmax(0, .78fr) auto minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-block: 1px solid var(--line);
  margin-bottom: clamp(44px, 6vw, 72px);
}
@media (max-width: 860px) {
  .era { grid-template-columns: 1fr; gap: 28px; }
}

.era__label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.era__col--now .era__label { color: var(--b1); }

.era__text {
  font-size: var(--t-md);
  color: var(--ink-3);
  line-height: 1.45;
}
.era__col--then .era__word { color: var(--ink-2); }
.era__col--now .era__text { color: var(--ink-2); margin-bottom: 10px; }

/* divisor: a linha que separa as duas eras */
.era__split {
  position: relative;
  align-self: stretch;
  width: 1px;
  background: var(--line);
  min-height: 90px;
}
.era__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--b2);
  box-shadow: 0 0 0 5px var(--paper);
}
.era__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--b2);
  opacity: .45;
  animation: eraPulse 3.4s var(--ease) infinite;
}
@keyframes eraPulse {
  0%, 100% { transform: scale(1);   opacity: .45; }
  50%      { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 860px) {
  .era__split { width: 100%; height: 1px; min-height: 0; }
  .era__dot { top: 50%; left: 22px; }
}

/* --- a palavra que troca --------------------------------------------------- */
.cycle { position: relative; }

.cycle__list {
  list-style: none;
  position: relative;
  height: 1.16em;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 4vw, 4.2rem);
  line-height: 1.16;
  letter-spacing: -.05em;
}

.cycle__item {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.42em);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
}
.cycle__item.is-on {
  opacity: 1;
  transform: none;
}
/* a palavra que sai desce, a que entra sobe */
.cycle__item.is-out {
  opacity: 0;
  transform: translateY(-.42em);
}

/* cada palavra puxa uma cor da tríade, em rodízio */
.cycle__item:nth-child(3n+1) { color: var(--institutional-2); }
.cycle__item:nth-child(3n+2) { color: var(--institutional-1); }
.cycle__item:nth-child(3n+3) { color: var(--institutional-3); }

.cycle__item::after { content: '.'; color: var(--line-2); }

/* trilho de progresso: mostra quanto falta para a próxima */
.cycle__track {
  margin-top: 18px;
  height: 2px;
  width: min(240px, 60%);
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
}
.cycle__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--institutional-1), var(--institutional-2));
  transform-origin: left;
  transform: scaleX(0);
}
.cycle.is-running .cycle__fill { animation: cycleFill 2.6s linear infinite; }
@keyframes cycleFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sem JS ou com movimento reduzido: as palavras viram lista legível */
@media (prefers-reduced-motion: reduce) {
  .cycle__list {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  }
  .cycle__item { position: static; opacity: 1; transform: none; }
  .cycle__track { display: none; }
  .era__dot::after { animation: none; }
}

/* --- o que cada um construiu ------------------------------------------------ */
.built {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.built__item {
  position: relative;
  background: var(--paper);
  padding: 26px 24px 24px;
  transition: background .45s var(--ease);
}
.built__item:hover { background: var(--card); }
.built__n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--line-2);
  margin-bottom: 16px;
  transition: color .45s var(--ease);
}
.built__item:hover .built__n { color: var(--b2); }
.built__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.04em;
  margin-bottom: 4px;
}
.built__item span:not(.built__n) { font-size: var(--t-sm); color: var(--ink-2); }

/* --- virada ----------------------------------------------------------------- */
.turn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
@media (max-width: 780px) { .turn { grid-template-columns: 1fr; gap: 24px; } }

.turn__text { font-size: var(--t-md); color: var(--ink-2); }
.turn__birth {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
  line-height: 1.12;
}

/* ==========================================================================
   05. O que é a Blind — as seis camadas como placas sobrepostas
   ========================================================================== */

.what__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .what__grid { grid-template-columns: 1fr; gap: 40px; } }

.what__text { position: sticky; top: 110px; }
@media (max-width: 900px) { .what__text { position: static; } }
.what__text .tag { margin-bottom: 18px; }
.what__text h2 { margin-bottom: 20px; }
.what__text .lede { margin-bottom: 28px; }

.what__close {
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.3;
}
.what__close .thin { display: block; margin-top: 6px; }

/* --- a pilha --------------------------------------------------------------- */
.plates__label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.plates__stack { list-style: none; display: grid; gap: 8px; }

.plate {
  --tint: color-mix(in srgb, var(--institutional-2) calc(6% + var(--i) * 5%), var(--card));
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 16px;
  align-items: baseline;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--institutional-1) calc(8% + var(--i) * 6%), var(--line));
  /* cada placa entra um pouco mais da margem: a pilha ganha profundidade */
  margin-left: calc(var(--i) * 10px);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), margin-left .5s var(--ease-out);
}
.plate:hover {
  margin-left: 0;
  transform: translateX(-4px);
  box-shadow: var(--sh-2);
  z-index: 2;
}
@media (max-width: 560px) { .plate { margin-left: calc(var(--i) * 5px); } }

.plate__n {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--institutional-1);
  opacity: .75;
}
.plate b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
}
.plate__d {
  grid-column: 2;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* ==========================================================================
   07. Para quem — faixas em movimento
   ========================================================================== */

.forwho__head { max-width: var(--measure); margin-bottom: clamp(36px, 5vw, 56px); }
.forwho__head .tag { margin-bottom: 18px; }

.rows {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(40px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rows__line { overflow: hidden; }
.rows__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: rowsRun 34s linear infinite;
}
.rows__line--back .rows__track { animation-direction: reverse; animation-duration: 40s; }
.rows:hover .rows__track { animation-play-state: paused; }

@keyframes rowsRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rows__track span {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.1rem + 3.4vw, 3.4rem);
  letter-spacing: -.05em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.rows__track span:nth-of-type(3n+2) { color: var(--institutional-1); }
.rows__track span:nth-of-type(3n+3) { color: var(--institutional-3); }
.rows__track span:hover { color: var(--institutional-2); }

/* marcador entre as palavras */
.rows__track i {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .rows__track { animation: none; flex-wrap: wrap; width: auto; }
  .rows { mask-image: none; -webkit-mask-image: none; }
}

/* --- fecho ------------------------------------------------------------------ */
.forwho__end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
@media (max-width: 780px) { .forwho__end { grid-template-columns: 1fr; gap: 22px; } }

.forwho__close { font-size: var(--t-md); color: var(--ink-2); }
.forwho__beat {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.25;
}
.forwho__beat .thin { display: block; margin-top: 4px; }

/* ==========================================================================
   04. A nova realidade
   ========================================================================== */

.reality { border-bottom: 1px solid var(--line); overflow: hidden; }

.reality__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .reality__grid { grid-template-columns: 1fr; gap: 48px; } }

.reality__in { max-width: 620px; }
.reality__in .tag { margin-bottom: 18px; }
.reality__in h2 { margin-bottom: 22px; }

.threats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.threats li {
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out);
}
.threats li:hover {
  border-color: var(--institutional-3);
  color: var(--institutional-1);
  transform: translateY(-2px);
}

.reality__beat {
  margin: 32px 0 16px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.04em;
  line-height: 1.15;
}
.reality__beat .thin { display: block; }
.reality__note {
  font-size: var(--t-sm);
  color: var(--ink-3);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 44ch;
}

/* ==========================================================================
   06. Fecho das três camadas
   ========================================================================== */

.beat {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.05em;
  line-height: 1.1;
}

/* ==========================================================================
   08. A pergunta
   ========================================================================== */

.ask {
  padding-block: clamp(80px, 11vw, 150px);
  background: var(--ink-bg);
  color: var(--on-ink);
  text-align: center;
}
.ask__in { max-width: 900px; }
.ask h2 { font-size: var(--t-2xl); margin-bottom: 36px; }
.ask .thin { color: var(--on-ink-2); }

.ask__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 40px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.ask__list li { transition: color .4s var(--ease); }
.ask__list li:hover { color: var(--institutional-3); }

.ask__turn {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
}

/* ==========================================================================
   13. Confiança
   ========================================================================== */

.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}
.trust__item {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .45s var(--ease);
}
.trust__item:hover { border-color: var(--line-2); }
/* faixa hachurada marca o que ainda não foi preenchido */
.trust__item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: repeating-linear-gradient(
    135deg,
    var(--line-2) 0 6px,
    transparent 6px 12px
  );
}
.trust__item.is-set::before { background: var(--b2); }
.trust__item b::after {
  content: 'pendente';
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--paper-3);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: middle;
}
.trust__item.is-set b::after { display: none; }
.trust__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
  margin: 8px 0 8px;
}
.trust__item p { font-size: var(--t-sm); color: var(--ink-3); }
.trust__item .card__k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   15. Fechamento
   ========================================================================== */

.cta__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0 0 30px;
  font-family: var(--f-display);
  font-size: var(--t-md);
  letter-spacing: -.03em;
  color: var(--on-ink-2);
}
.cta__seal {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.35;
  margin-bottom: 32px;
  color: var(--on-ink-2);
}
.cta__seal b { display: inline-block; margin-top: 4px; font-weight: 800; color: var(--on-ink); letter-spacing: -.05em; }

/* fechamento: o substantivo carrega o peso */
.cta__list b { font-weight: 700; color: var(--on-ink); }

/* ==========================================================================
   03. Perdas — numeração e revelação progressiva
   ========================================================================== */

.loss { position: relative; counter-increment: perda; }
.stake__grid { counter-reset: perda; }
.loss::before {
  content: counter(perda, decimal-leading-zero);
  position: absolute;
  top: clamp(20px, 2.4vw, 26px);
  right: clamp(20px, 2.4vw, 26px);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--line-2);
  transition: color .45s var(--ease);
}
.loss:hover::before { color: var(--b2); }
.loss h3 { padding-right: 34px; }

/* ==========================================================================
   08. A pergunta — a lista respira mais
   ========================================================================== */

.ask__list li {
  position: relative;
  padding-bottom: 4px;
}
.ask__list li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--institutional-3);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease-out);
}
.ask__list li:hover::after { transform: scaleX(1); }

/* ==========================================================================
   Ritmo entre seções: alterna a superfície para não virar uma coluna só
   ========================================================================== */

.what { background: var(--paper-2); border-block: 1px solid var(--line); }
.forwho { background: var(--paper-2); border-block: 1px solid var(--line); }

/* ==========================================================================
   02. O mundo mudou — antes · hoje
   ========================================================================== */

.shift__head { max-width: var(--measure); margin-bottom: clamp(44px, 6vw, 76px); }
.shift__head .tag { margin-bottom: 18px; }
.shift__head h2 { margin-bottom: 14px; }

/* --- o par ---------------------------------------------------------------- */
.era {
  display: grid;
  grid-template-columns: minmax(0, .78fr) auto minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-block: 1px solid var(--line);
  margin-bottom: clamp(44px, 6vw, 72px);
}
@media (max-width: 860px) {
  .era { grid-template-columns: 1fr; gap: 28px; }
}

.era__label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.era__col--now .era__label { color: var(--b1); }

.era__text {
  font-size: var(--t-md);
  color: var(--ink-3);
  line-height: 1.45;
}
.era__col--then .era__word { color: var(--ink-2); }
.era__col--now .era__text { color: var(--ink-2); margin-bottom: 10px; }

/* divisor: a linha que separa as duas eras */
.era__split {
  position: relative;
  align-self: stretch;
  width: 1px;
  background: var(--line);
  min-height: 90px;
}
.era__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--b2);
  box-shadow: 0 0 0 5px var(--paper);
}
.era__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--b2);
  opacity: .45;
  animation: eraPulse 3.4s var(--ease) infinite;
}
@keyframes eraPulse {
  0%, 100% { transform: scale(1);   opacity: .45; }
  50%      { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 860px) {
  .era__split { width: 100%; height: 1px; min-height: 0; }
  .era__dot { top: 50%; left: 22px; }
}

/* --- a palavra que troca --------------------------------------------------- */
.cycle { position: relative; }

.cycle__list {
  list-style: none;
  position: relative;
  height: 1.16em;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 4vw, 4.2rem);
  line-height: 1.16;
  letter-spacing: -.05em;
}

.cycle__item {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.42em);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events: none;
}
.cycle__item.is-on {
  opacity: 1;
  transform: none;
}
/* a palavra que sai desce, a que entra sobe */
.cycle__item.is-out {
  opacity: 0;
  transform: translateY(-.42em);
}

/* cada palavra puxa uma cor da tríade, em rodízio */
.cycle__item:nth-child(3n+1) { color: var(--institutional-2); }
.cycle__item:nth-child(3n+2) { color: var(--institutional-1); }
.cycle__item:nth-child(3n+3) { color: var(--institutional-3); }

.cycle__item::after { content: '.'; color: var(--line-2); }

/* trilho de progresso: mostra quanto falta para a próxima */
.cycle__track {
  margin-top: 18px;
  height: 2px;
  width: min(240px, 60%);
  background: var(--paper-3);
  border-radius: 2px;
  overflow: hidden;
}
.cycle__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--institutional-1), var(--institutional-2));
  transform-origin: left;
  transform: scaleX(0);
}
.cycle.is-running .cycle__fill { animation: cycleFill 2.6s linear infinite; }
@keyframes cycleFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sem JS ou com movimento reduzido: as palavras viram lista legível */
@media (prefers-reduced-motion: reduce) {
  .cycle__list {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  }
  .cycle__item { position: static; opacity: 1; transform: none; }
  .cycle__track { display: none; }
  .era__dot::after { animation: none; }
}

/* --- o que cada um construiu ------------------------------------------------ */
.built {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.built__item {
  position: relative;
  background: var(--paper);
  padding: 26px 24px 24px;
  transition: background .45s var(--ease);
}
.built__item:hover { background: var(--card); }
.built__n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--line-2);
  margin-bottom: 16px;
  transition: color .45s var(--ease);
}
.built__item:hover .built__n { color: var(--b2); }
.built__item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.04em;
  margin-bottom: 4px;
}
.built__item span:not(.built__n) { font-size: var(--t-sm); color: var(--ink-2); }

/* --- virada ----------------------------------------------------------------- */
.turn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
@media (max-width: 780px) { .turn { grid-template-columns: 1fr; gap: 24px; } }

.turn__text { font-size: var(--t-md); color: var(--ink-2); }
.turn__birth {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  letter-spacing: -.045em;
  line-height: 1.12;
}

/* ==========================================================================
   05. O que é a Blind — as seis camadas como placas sobrepostas
   ========================================================================== */

.what__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .what__grid { grid-template-columns: 1fr; gap: 40px; } }

.what__text { position: sticky; top: 110px; }
@media (max-width: 900px) { .what__text { position: static; } }
.what__text .tag { margin-bottom: 18px; }
.what__text h2 { margin-bottom: 20px; }
.what__text .lede { margin-bottom: 28px; }

.what__close {
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.3;
}
.what__close .thin { display: block; margin-top: 6px; }

/* --- a pilha --------------------------------------------------------------- */
.plates__label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.plates__stack { list-style: none; display: grid; gap: 8px; }

.plate {
  --tint: color-mix(in srgb, var(--institutional-2) calc(6% + var(--i) * 5%), var(--card));
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 16px;
  align-items: baseline;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--institutional-1) calc(8% + var(--i) * 6%), var(--line));
  /* cada placa entra um pouco mais da margem: a pilha ganha profundidade */
  margin-left: calc(var(--i) * 10px);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), margin-left .5s var(--ease-out);
}
.plate:hover {
  margin-left: 0;
  transform: translateX(-4px);
  box-shadow: var(--sh-2);
  z-index: 2;
}
@media (max-width: 560px) { .plate { margin-left: calc(var(--i) * 5px); } }

.plate__n {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--institutional-1);
  opacity: .75;
}
.plate b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.03em;
}
.plate__d {
  grid-column: 2;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* ==========================================================================
   07. Para quem — faixas em movimento
   ========================================================================== */

.forwho__head { max-width: var(--measure); margin-bottom: clamp(36px, 5vw, 56px); }
.forwho__head .tag { margin-bottom: 18px; }

.rows {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(40px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rows__line { overflow: hidden; }
.rows__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: rowsRun 34s linear infinite;
}
.rows__line--back .rows__track { animation-direction: reverse; animation-duration: 40s; }
.rows:hover .rows__track { animation-play-state: paused; }

@keyframes rowsRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rows__track span {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.1rem + 3.4vw, 3.4rem);
  letter-spacing: -.05em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
  transition: color .4s var(--ease);
}
.rows__track span:nth-of-type(3n+2) { color: var(--institutional-1); }
.rows__track span:nth-of-type(3n+3) { color: var(--institutional-3); }
.rows__track span:hover { color: var(--institutional-2); }

/* marcador entre as palavras */
.rows__track i {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .rows__track { animation: none; flex-wrap: wrap; width: auto; }
  .rows { mask-image: none; -webkit-mask-image: none; }
}

/* --- fecho ------------------------------------------------------------------ */
.forwho__end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
@media (max-width: 780px) { .forwho__end { grid-template-columns: 1fr; gap: 22px; } }

.forwho__close { font-size: var(--t-md); color: var(--ink-2); }
.forwho__beat {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  line-height: 1.25;
}
.forwho__beat .thin { display: block; margin-top: 4px; }

/* ==========================================================================
   04. A nova realidade
   ========================================================================== */

.reality { border-bottom: 1px solid var(--line); overflow: hidden; }

.reality__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .reality__grid { grid-template-columns: 1fr; gap: 48px; } }

.reality__in { max-width: 620px; }
.reality__in .tag { margin-bottom: 18px; }
.reality__in h2 { margin-bottom: 22px; }

.threats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.threats li {
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out);
}
.threats li:hover {
  border-color: var(--institutional-3);
  color: var(--institutional-1);
  transform: translateY(-2px);
}

.reality__beat {
  margin: 32px 0 16px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.04em;
  line-height: 1.15;
}
.reality__beat .thin { display: block; }
.reality__note {
  font-size: var(--t-sm);
  color: var(--ink-3);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 44ch;
}

/* ==========================================================================
   O aparelho em 3D
   --------------------------------------------------------------------------
   Caixa de verdade em CSS 3D: seis faces, não uma imagem chapada. A rotação
   acompanha o scroll — quanto mais a seção sobe, mais o aparelho gira.
   ========================================================================== */

@property --spinY { syntax: '<angle>'; initial-value: -22deg; inherits: true; }

.stage {
  --spinY: -22deg;          /* atualizado pelo scroll */
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(400px, 52vw, 560px);
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

/* brilho difuso ao fundo, dando plano à cena */
.stage__glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--institutional-2) 16%, transparent),
    transparent 68%
  );
  filter: blur(14px);
}

.orbit {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(var(--spinY));
  transition: transform .12s linear;
}

/* --- corpo do aparelho ----------------------------------------------------- */
.device {
  --w: clamp(200px, 20vw, 258px);
  --h: calc(var(--w) * 2.06);
  --d: 11px;                              /* metade da espessura */
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}

.device__face, .device__edge {
  position: absolute;
  border-radius: 30px;
  background: var(--dev-shell);
}

.device__face--front {
  inset: 0;
  transform: translateZ(var(--d));
  padding: 9px;
  box-shadow:
    0 0 0 1px var(--dev-hair),
    0 30px 60px var(--dev-drop);
}
.device__face--back {
  inset: 0;
  transform: translateZ(calc(var(--d) * -1)) rotateY(180deg);
  background: var(--dev-back);
  box-shadow: 0 0 0 1px var(--dev-hair);
}

/* laterais: dão a espessura real da caixa */
.device__edge { background: linear-gradient(180deg, var(--paper-2), var(--paper-3)); }
.device__edge--left {
  top: 0; bottom: 0; left: 0;
  width: calc(var(--d) * 2);
  transform: translateX(calc(var(--d) * -1)) rotateY(-90deg);
  border-radius: 4px;
}
.device__edge--right {
  top: 0; bottom: 0; right: 0;
  width: calc(var(--d) * 2);
  transform: translateX(var(--d)) rotateY(90deg);
  border-radius: 4px;
}
.device__edge--top {
  left: 0; right: 0; top: 0;
  height: calc(var(--d) * 2);
  transform: translateY(calc(var(--d) * -1)) rotateX(90deg);
  border-radius: 4px;
}
.device__edge--bottom {
  left: 0; right: 0; bottom: 0;
  height: calc(var(--d) * 2);
  transform: translateY(var(--d)) rotateX(-90deg);
  border-radius: 4px;
}

/* --- tela ------------------------------------------------------------------ */
.screen {
  position: relative;
  height: 100%;
  border-radius: 23px;
  background: linear-gradient(170deg, var(--paper) 0%, var(--paper-2) 100%);
  overflow: hidden;
  padding: 26px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.screen__notch {
  position: absolute;
  top: 9px; left: 50%;
  width: 34%; height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--dev-drop);
}

.screen__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.screen__brand {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.05em;
  color: var(--ink);
}
.screen__pill {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-fg);
  font-family: var(--f-mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.screen__acct { display: flex; align-items: center; gap: 9px; }
.screen__ava {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--institutional-2), var(--institutional-1));
  flex: 0 0 auto;
}
.screen__id { display: grid; gap: 4px; flex: 1; }

.screen__bar { display: block; height: 5px; border-radius: 3px; background: var(--dev-bar); }
.screen__bar--w { width: 74%; }
.screen__bar--n { width: 44%; opacity: .6; }
.screen__bar--m { width: 62%; }
.screen__bar--s { width: 40%; }

/* escudo grande no meio da tela, pulsando devagar */
.screen__shield {
  margin: 4px auto 2px;
  width: 52%;
  color: var(--institutional-2);
  filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--institutional-2) 32%, transparent));
  animation: shieldBreathe 4.2s var(--ease) infinite;
}
.screen__shield svg { width: 100%; height: auto; }
@keyframes shieldBreathe {
  0%, 100% { transform: scale(1);    opacity: .92; }
  50%      { transform: scale(1.05); opacity: 1; }
}

.screen__rows { display: grid; gap: 8px; margin-top: auto; }
.screen__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  background: var(--dev-row);
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.dot--ok { background: var(--ok); }
.dot--live {
  background: var(--institutional-2);
  animation: dotBlink 2.2s var(--ease) infinite;
}
@keyframes dotBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* --- escudos orbitando ------------------------------------------------------ */
.guard {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(30px, 3.4vw, 42px);
  margin: -21px 0 0 -18px;
  color: var(--institutional-1);
  transform-style: preserve-3d;
  opacity: .9;
}
.guard svg { width: 100%; height: auto; }

/* cada escudo é empurrado para fora no eixo Z depois de girar: órbita real */
.guard--1 {
  transform: rotateY(0deg)   translateZ(178px) translateY(-118px) rotateY(0deg);
  color: var(--institutional-2);
}
.guard--2 {
  transform: rotateY(90deg)  translateZ(168px) translateY(48px) rotateY(-90deg);
  color: var(--institutional-1);
}
.guard--3 {
  transform: rotateY(190deg) translateZ(180px) translateY(-30px) rotateY(-190deg);
  color: var(--institutional-3);
}
.guard--4 {
  transform: rotateY(285deg) translateZ(172px) translateY(126px) rotateY(-285deg);
  color: var(--institutional-2);
}

/* anel no chão da cena, para o conjunto não flutuar solto */
.ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  margin: -200px 0 0 -200px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--institutional-1) 26%, transparent);
  transform: rotateX(90deg) translateZ(-230px);
  pointer-events: none;
}

@media (max-width: 900px) {
  .stage { min-height: 440px; }
  .guard--1 { transform: rotateY(0deg)   translateZ(140px) translateY(-96px)  rotateY(0deg); }
  .guard--2 { transform: rotateY(90deg)  translateZ(132px) translateY(38px)   rotateY(-90deg); }
  .guard--3 { transform: rotateY(190deg) translateZ(142px) translateY(-24px)  rotateY(-190deg); }
  .guard--4 { transform: rotateY(285deg) translateZ(136px) translateY(100px)  rotateY(-285deg); }
  .ring { width: 310px; height: 310px; margin: -155px 0 0 -155px; transform: rotateX(90deg) translateZ(-180px); }
}

/* Movimento reduzido: a cena para de frente, sem girar nem pulsar */
@media (prefers-reduced-motion: reduce) {
  .orbit { transform: rotateX(6deg) rotateY(-14deg) !important; transition: none; }
  .screen__shield, .dot--live { animation: none; }
}

/* ==========================================================================
   CENA 3D — o aparelho protegido
   --------------------------------------------------------------------------
   Caixa 3D real em CSS: seis faces, cúpula de anéis, escudos em órbita e
   ameaças que convergem e são barradas. A rotação vem do scroll; a inclinação
   fina, do cursor. Tudo em `preserve-3d`, então a ordem de profundidade se
   resolve sozinha — escudo que passa atrás some atrás mesmo.
   ========================================================================== */

@property --spinY  { syntax: '<angle>';  initial-value: -26deg; inherits: true; }
@property --tiltX  { syntax: '<angle>';  initial-value: 0deg;   inherits: true; }
@property --tiltY  { syntax: '<angle>';  initial-value: 0deg;   inherits: true; }
@property --z      { syntax: '<length>'; initial-value: 430px;  inherits: false; }
@property --aura   { syntax: '<number>'; initial-value: 0;      inherits: true; }

.stage {
  --spinY: -26deg;
  --tiltX: 0deg;
  --tiltY: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(430px, 56vw, 620px);
  perspective: 1500px;
  perspective-origin: 50% 44%;
}

/* --- ambiente -------------------------------------------------------------- */
.stage__aura {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 42%, color-mix(in srgb, var(--institutional-2) 22%, transparent), transparent 62%),
    radial-gradient(circle at 62% 64%, color-mix(in srgb, var(--institutional-3) 14%, transparent), transparent 58%);
  filter: blur(18px);
  animation: auraDrift 13s var(--ease) infinite;
}
@keyframes auraDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1);      opacity: .9; }
  33%      { transform: translate3d(3%,-3%,0) scale(1.06); opacity: 1; }
  66%      { transform: translate3d(-3%,2%,0) scale(.97);  opacity: .82; }
}

/* névoa fina por cima, tirando o aspecto de vetor duro */
.stage__haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 52% at 50% 46%, transparent 42%, var(--paper) 96%);
}

/* --- a cena ---------------------------------------------------------------- */
.scene {
  position: relative;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(9deg + var(--tiltX)))
    rotateY(calc(var(--spinY) + var(--tiltY)));
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  animation: sceneFloat 7.5s var(--ease) infinite;
}
@keyframes sceneFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

/* entrada: a cena se monta quando aparece */
.stage:not(.is-in) .scene { opacity: 0; scale: .9; }
.stage.is-in .scene { opacity: 1; scale: 1; transition: transform .5s var(--ease), opacity .9s var(--ease-out), scale 1.1s var(--ease-out); }

/* ==========================================================================
   Cúpula de proteção
   ========================================================================== */

.dome {
  position: absolute;
  top: 50%; left: 50%;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.dome__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--institutional-2) 30%, transparent);
}
.dome__ring--a { transform: rotateY(0deg);   animation: domeA 26s linear infinite; }
.dome__ring--b { transform: rotateY(62deg);  border-color: color-mix(in srgb, var(--institutional-1) 26%, transparent); animation: domeB 34s linear infinite; }
.dome__ring--c { transform: rotateX(74deg);  border-style: dashed; border-color: color-mix(in srgb, var(--institutional-3) 30%, transparent); animation: domeC 40s linear infinite; }

@keyframes domeA { to { transform: rotateY(360deg); } }
@keyframes domeB { to { transform: rotateY(422deg); } }
@keyframes domeC { to { transform: rotateX(74deg) rotateZ(360deg); } }

/* onda que atravessa a cúpula a cada interceptação */
.dome__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--institutional-2) 55%, transparent);
  opacity: 0;
  animation: domePulse 4.6s var(--ease-out) infinite;
}
@keyframes domePulse {
  0%   { transform: scale(.62); opacity: 0; }
  18%  { opacity: .55; }
  70%  { transform: scale(1.08); opacity: 0; }
  100% { transform: scale(1.08); opacity: 0; }
}

@media (max-width: 900px) {
  .dome { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
}

/* ==========================================================================
   Ameaças convergindo
   ========================================================================== */

.incoming { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; }

.threat {
  --a: 0deg;
  --y: 0px;
  --d: 0s;
  --z: 430px;
  position: absolute;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--institutional-3);
  transform: rotateY(var(--a)) translateZ(var(--z)) translateY(var(--y));
  opacity: 0;
  animation: threatIn 7.2s linear infinite;
  animation-delay: var(--d);
}
/* rastro curto atrás do ponto */
.threat::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 1.5px;
  margin-top: -.75px;
  transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--institutional-3) 70%, transparent), transparent);
}
/* estouro no momento em que bate na cúpula */
.threat::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--institutional-2);
  opacity: 0;
  animation: threatBurst 7.2s linear infinite;
  animation-delay: var(--d);
}

@keyframes threatIn {
  0%   { --z: 440px; opacity: 0; }
  8%   { opacity: .9; }
  46%  { --z: 238px; opacity: 1; }
  52%  { --z: 232px; opacity: 0; }   /* barrada na cúpula */
  100% { --z: 232px; opacity: 0; }
}
@keyframes threatBurst {
  0%, 44%  { transform: scale(.5); opacity: 0; }
  50%      { transform: scale(1);  opacity: .9; }
  62%      { transform: scale(3.4); opacity: 0; }
  100%     { transform: scale(3.4); opacity: 0; }
}

@media (max-width: 900px) {
  @keyframes threatIn {
    0%   { --z: 330px; opacity: 0; }
    8%   { opacity: .9; }
    46%  { --z: 180px; opacity: 1; }
    52%  { --z: 174px; opacity: 0; }
    100% { --z: 174px; opacity: 0; }
  }
}

/* ==========================================================================
   O aparelho
   ========================================================================== */

.device {
  --w: clamp(196px, 19vw, 250px);
  --h: calc(var(--w) * 2.06);
  --d: 11px;
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}

.device__face, .device__edge { position: absolute; border-radius: 30px; background: var(--dev-shell); }

.device__face--front {
  inset: 0;
  transform: translateZ(var(--d));
  padding: 9px;
  box-shadow:
    0 0 0 1px var(--dev-hair),
    0 34px 70px var(--dev-drop),
    0 4px 10px var(--dev-hair);
}

.device__face--back {
  inset: 0;
  transform: translateZ(calc(var(--d) * -1)) rotateY(180deg);
  background: var(--dev-back-2);
  box-shadow: 0 0 0 1px var(--dev-hair);
  overflow: hidden;
}
/* verso com câmera e marca, para o giro revelar algo */
.device__lens {
  position: absolute;
  top: 22px; left: 22px;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--paper-2), var(--paper-3));
  box-shadow: inset 0 0 0 1px var(--dev-hair);
}
.device__lens::after {
  content: '';
  position: absolute;
  top: 11px; left: 11px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--dev-lens);
  box-shadow: inset 0 0 0 1px var(--dev-hair);
}
.device__mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      var(--institutional-2), var(--institutional-1),
      var(--institutional-3), var(--institutional-2));
  opacity: .16;
}

.device__edge { background: linear-gradient(180deg, var(--card), var(--paper-3)); }
.device__edge--left   { top: 0; bottom: 0; left: 0;  width: calc(var(--d) * 2); transform: translateX(calc(var(--d) * -1)) rotateY(-90deg); border-radius: 4px; }
.device__edge--right  { top: 0; bottom: 0; right: 0; width: calc(var(--d) * 2); transform: translateX(var(--d)) rotateY(90deg);  border-radius: 4px; }
.device__edge--top    { left: 0; right: 0; top: 0;   height: calc(var(--d) * 2); transform: translateY(calc(var(--d) * -1)) rotateX(90deg); border-radius: 4px; }
.device__edge--bottom { left: 0; right: 0; bottom: 0;height: calc(var(--d) * 2); transform: translateY(var(--d)) rotateX(-90deg); border-radius: 4px; }

/* ==========================================================================
   Tela
   ========================================================================== */

.screen {
  position: relative;
  height: 100%;
  border-radius: 23px;
  background: linear-gradient(168deg, var(--paper) 0%, var(--paper-2) 100%);
  overflow: hidden;
  padding: 26px 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.screen__notch {
  position: absolute;
  top: 9px; left: 50%;
  width: 32%; height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--dev-drop);
}

.screen__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.screen__brand { font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: -.05em; }
.screen__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-fg);
  font-family: var(--f-mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.screen__pill i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dotBlink 2.6s var(--ease) infinite; }

.screen__acct { display: flex; align-items: center; gap: 9px; }
.screen__ava {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(from 210deg, var(--institutional-2), var(--institutional-1), var(--institutional-3), var(--institutional-2));
}
.screen__id { display: grid; gap: 4px; flex: 1; }

.bar { display: block; height: 5px; border-radius: 3px; background: var(--dev-bar); }
.bar--w { width: 74%; }
.bar--n { width: 44%; opacity: .6; }
.bar--m { width: 62%; }
.bar--s { width: 40%; }

/* núcleo: escudo com halo respirando */
.screen__core {
  position: relative;
  display: grid;
  place-items: center;
  margin: 2px 0;
}
.screen__halo {
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--institutional-2) 30%, transparent), transparent 66%);
  animation: haloBreathe 4.2s var(--ease) infinite;
}
@keyframes haloBreathe {
  0%, 100% { transform: scale(.86); opacity: .55; }
  50%      { transform: scale(1.12); opacity: .95; }
}
.screen__shield {
  position: relative;
  width: 48%;
  color: var(--institutional-2);
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--institutional-2) 34%, transparent));
  animation: shieldBreathe 4.2s var(--ease) infinite;
}
@keyframes shieldBreathe {
  0%, 100% { transform: scale(1);    opacity: .94; }
  50%      { transform: scale(1.06); opacity: 1; }
}
/* o "check" se redesenha de tempos em tempos */
.screen__tick {
  stroke-dasharray: 16;
  stroke-dashoffset: 0;
  animation: tickDraw 4.6s var(--ease-out) infinite;
}
@keyframes tickDraw {
  0%, 62%  { stroke-dashoffset: 0; }
  70%      { stroke-dashoffset: 16; }
  92%, 100%{ stroke-dashoffset: 0; }
}

.screen__rows { display: grid; gap: 7px; margin-top: auto; }
.screen__row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  background: var(--dev-row);
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.dot--ok { background: var(--ok); }
.dot--live { background: var(--institutional-2); animation: dotBlink 2.2s var(--ease) infinite; }
@keyframes dotBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* varredura passando pela tela */
.screen__scan {
  position: absolute;
  left: 0; right: 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--institutional-2) 12%, transparent), transparent);
  animation: scanRun 5.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes scanRun {
  0%   { top: -46%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* reflexo do vidro atravessando */
.screen__glare {
  position: absolute;
  inset: -30% -60%;
  background: linear-gradient(104deg, transparent 38%, var(--dev-glare) 48%, transparent 58%);
  transform: translateX(-40%);
  animation: glareRun 9s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes glareRun {
  0%, 62%  { transform: translateX(-46%); }
  86%, 100%{ transform: translateX(46%); }
}

/* ==========================================================================
   Escudos em órbita
   ========================================================================== */

.arm {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.arm--1 { animation: armSpin 22s linear infinite; }
.arm--2 { animation: armSpin 28s linear infinite reverse; }
.arm--3 { animation: armSpin 25s linear infinite; }
.arm--4 { animation: armSpin 32s linear infinite reverse; }

@keyframes armSpin { to { transform: rotateY(360deg); } }

.guard {
  position: absolute;
  display: block;
  width: clamp(30px, 3.2vw, 40px);
  margin: -20px 0 0 -18px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 8px 16px var(--dev-drop));
}
/* o escudo contragira no mesmo tempo do braço, então fica sempre de frente */
.arm--1 .guard { transform: translateZ(216px) translateY(-124px); animation: guardFace 22s linear infinite reverse; color: var(--institutional-2); }
.arm--2 .guard { transform: translateZ(200px) translateY(66px);   animation: guardFace 28s linear infinite;         color: var(--institutional-1); }
.arm--3 .guard { transform: translateZ(228px) translateY(-16px);  animation: guardFace 25s linear infinite reverse; color: var(--institutional-3); }
.arm--4 .guard { transform: translateZ(206px) translateY(140px);  animation: guardFace 32s linear infinite;         color: var(--institutional-2); }

@keyframes guardFace { to { rotate: y 360deg; } }

.guard svg { width: 100%; height: auto; }

@media (max-width: 900px) {
  .arm--1 .guard { transform: translateZ(158px) translateY(-96px); }
  .arm--2 .guard { transform: translateZ(148px) translateY(52px); }
  .arm--3 .guard { transform: translateZ(166px) translateY(-12px); }
  .arm--4 .guard { transform: translateZ(152px) translateY(104px); }
}

/* ==========================================================================
   Chão da cena
   ========================================================================== */

.floor {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.floor__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--institutional-1) 24%, transparent);
  transform: rotateX(90deg) translateZ(-268px);
}
.floor__ring--1 { width: 430px; height: 430px; margin: -215px 0 0 -215px; animation: floorSpin 30s linear infinite; }
.floor__ring--2 {
  width: 300px; height: 300px; margin: -150px 0 0 -150px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--institutional-2) 20%, transparent);
  transform: rotateX(90deg) translateZ(-268px);
  animation: floorSpin 22s linear infinite reverse;
}
@keyframes floorSpin { to { rotate: z 360deg; } }

.floor__grid {
  position: absolute;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  transform: rotateX(90deg) translateZ(-270px);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--institutional-1) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--institutional-1) 12%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
          mask-image: radial-gradient(circle, #000 12%, transparent 62%);
}

@media (max-width: 900px) {
  .floor__ring--1 { width: 320px; height: 320px; margin: -160px 0 0 -160px; transform: rotateX(90deg) translateZ(-200px); }
  .floor__ring--2 { width: 220px; height: 220px; margin: -110px 0 0 -110px; transform: rotateX(90deg) translateZ(-200px); }
  .floor__grid { width: 400px; height: 400px; margin: -200px 0 0 -200px; transform: rotateX(90deg) translateZ(-202px); }
}

/* ==========================================================================
   Movimento reduzido: cena parada, de frente
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .scene {
    transform: rotateX(6deg) rotateY(-16deg) !important;
    animation: none;
    opacity: 1 !important;
    scale: 1 !important;
  }
  .stage__aura, .dome__ring, .dome__pulse, .threat, .threat::after,
  .arm, .guard, .floor__ring, .screen__scan, .screen__glare,
  .screen__shield, .screen__halo, .screen__tick, .dot--live, .screen__pill i {
    animation: none !important;
  }
  .threat { opacity: .25; }
}

/* ==========================================================================
   Revelação linha a linha dos títulos
   Cada linha sobe de trás de uma máscara, escalonada. É o gesto que os sites
   de referência usam nas manchetes.
   ========================================================================== */

[data-lines] .ln { display: block; overflow: hidden; }
[data-lines] .ln > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--l, 0) * .085s);
}
[data-lines].is-in .ln > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-lines] .ln > i { transform: none !important; }
}

/* ==========================================================================
   04. A nova realidade — com a fotografia
   ========================================================================== */

.reality { border-bottom: 1px solid var(--line); overflow: hidden; }

.reality__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .reality__grid { grid-template-columns: 1fr; gap: 52px; } }

.reality__in { max-width: 620px; }
.reality__in .tag { margin-bottom: 18px; }
.reality__in h2 { margin-bottom: 22px; }

.threats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; }
.threats li {
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out);
}
.threats li:hover {
  border-color: var(--institutional-3);
  color: var(--institutional-1);
  transform: translateY(-2px);
}

.reality__beat {
  margin: 32px 0 16px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  letter-spacing: -.04em;
  line-height: 1.15;
}
.reality__beat .thin { display: block; }
.reality__note {
  font-size: var(--t-sm);
  color: var(--ink-3);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 44ch;
}

/* --- a fotografia ---------------------------------------------------------- */
.shot {
  --par: 0px;                 /* deslocamento de paralaxe, vindo do JS */
  position: relative;
  margin: 0;
}

.shot__frame {
  position: relative;
  border-radius: clamp(18px, 2.4vw, 28px);
  overflow: hidden;
  box-shadow: var(--sh-3);
  transform: translate3d(0, var(--par), 0);
  will-change: transform;
}
.shot__frame img {
  display: block;
  width: 100%;
  height: auto;
  /* a imagem entra com um leve zoom que assenta ao aparecer */
  transform: scale(1.07);
  transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}
.shot.is-in .shot__frame img { transform: scale(1); }

/* véu na cor da marca, casando a foto com a paleta */
.shot__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(200deg,
      color-mix(in srgb, var(--institutional-1) 16%, transparent) 0%,
      transparent 46%),
    linear-gradient(20deg,
      color-mix(in srgb, var(--institutional-3) 12%, transparent) 0%,
      transparent 52%);
  mix-blend-mode: soft-light;
}

/* --- selos flutuantes ------------------------------------------------------ */
.chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px 11px 12px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
}
.shot.is-in .chip { opacity: 1; transform: none; }
.chip--top    { top: 8%;    left: -6%;  transition-delay: .35s; }
.chip--bottom { bottom: 11%; right: -5%; transition-delay: .55s; }

@media (max-width: 600px) {
  .chip--top    { left: 0;  top: 6%; }
  .chip--bottom { right: 0; bottom: 6%; }
  .chip { padding: 9px 13px 9px 10px; }
}

.chip__ico {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wash);
  color: var(--institutional-1);
  flex: 0 0 auto;
}
.chip__ico svg { width: 15px; height: auto; }

.chip__pulse {
  width: 10px; height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent);
  animation: chipBeat 2.6s var(--ease) infinite;
}
@keyframes chipBeat {
  0%       { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); }
  70%,100% { box-shadow: 0 0 0 10px transparent; }
}

.chip__txt { display: grid; gap: 1px; }
.chip__txt b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.chip__txt small {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-3);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .shot__frame { transform: none !important; }
  .shot__frame img { transform: none; }
  .chip { opacity: 1; transform: none; }
  .chip__pulse { animation: none; }
}

/* ==========================================================================
   06. Seção presa que avança por etapas
   --------------------------------------------------------------------------
   A seção é alta; dentro dela um bloco `sticky` fica preso na tela enquanto
   o scroll percorre a altura restante. O progresso troca as etapas.
   ========================================================================== */

.pin {
  position: relative;
  /* três telas de percurso: uma por etapa */
  height: 300vh;
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.pin__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .pin { height: 280vh; }
  .pin__grid { grid-template-columns: 1fr; gap: 28px; align-content: center; }
}

/* --- índice fixo ----------------------------------------------------------- */
.pin__side .tag { margin-bottom: 18px; }
.pin__side h2 { font-size: var(--t-2xl); margin-bottom: clamp(24px, 3vw, 38px); }

.pin__index { list-style: none; display: grid; gap: 2px; margin-bottom: 26px; }
.pin__idx {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: -.03em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  transition: color .5s var(--ease), padding-left .5s var(--ease-out);
}
.pin__idx span {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--line-2);
  transition: color .5s var(--ease);
}
.pin__idx.is-on { color: var(--ink); padding-left: 10px; }
.pin__idx.is-on span { color: var(--b2); }
.pin__idx.is-done { color: var(--ink-2); }

@media (max-width: 900px) {
  .pin__side h2 { font-size: var(--t-xl); margin-bottom: 18px; }
  .pin__index { grid-auto-flow: column; gap: 10px; margin-bottom: 18px; }
  .pin__idx { border-bottom: 0; padding: 6px 0; font-size: var(--t-base); }
  .pin__idx.is-on { padding-left: 0; }
}

/* barra de progresso do percurso */
.pin__bar { height: 2px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.pin__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--institutional-1), var(--institutional-2), var(--institutional-3));
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform .18s linear;
}

/* --- as etapas -------------------------------------------------------------- */
.pin__stage { position: relative; min-height: clamp(320px, 42vh, 420px); }

.step {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper-2);
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .6s var(--ease), transform .7s var(--ease-out);
  pointer-events: none;
  overflow: hidden;
}
.step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.step.is-out { opacity: 0; transform: translateY(-22px) scale(.985); }

.step__when {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc);
}
.step h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: -.05em;
  line-height: 1;
}
.step p { color: var(--ink-2); max-width: 46ch; }

.step__list { list-style: none; display: grid; gap: 8px; margin-top: 6px; }
.step__list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 11px;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.step__list li::before {
  content: '';
  width: 7px; height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--sc);
}

/* --- desenho de fundo de cada etapa ----------------------------------------- */
.step__art {
  position: absolute;
  right: -60px; bottom: -60px;
  width: 260px; height: 260px;
  pointer-events: none;
  opacity: .5;
}
.art__core {
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--sc);
  opacity: .22;
}

/* prevenir: ondas concêntricas saindo */
.art__wave {
  position: absolute;
  top: 50%; left: 50%;
  width: 90px; height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 1.5px solid var(--sc);
  opacity: 0;
  animation: artWave 3.6s var(--ease-out) infinite;
}
.art__wave--2 { animation-delay: 1.2s; }
.art__wave--3 { animation-delay: 2.4s; }
@keyframes artWave {
  0%   { transform: scale(.4); opacity: .6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* agir: feixes convergindo */
.art__beam {
  position: absolute;
  top: 50%; left: 50%;
  width: 120px; height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--sc));
  opacity: .5;
  animation: artBeam 2.4s var(--ease) infinite;
}
.art__beam    { transform: rotate(20deg); }
.art__beam--2 { transform: rotate(140deg); animation-delay: .5s; }
.art__beam--3 { transform: rotate(260deg); animation-delay: 1s; }
@keyframes artBeam {
  0%, 100% { opacity: .18; }
  50%      { opacity: .7; }
}

/* proteger: placas se acumulando */
.art__plate {
  position: absolute;
  top: 50%; left: 50%;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 22px;
  border: 1.5px solid var(--sc);
  opacity: .35;
  animation: artPlate 4s var(--ease) infinite;
}
.art__plate--2 { animation-delay: .6s; }
.art__plate--3 { animation-delay: 1.2s; }
@keyframes artPlate {
  0%, 100% { transform: rotate(0deg)  scale(1);    opacity: .16; }
  50%      { transform: rotate(12deg) scale(1.16); opacity: .42; }
}

@media (max-width: 640px) { .step__art { width: 180px; height: 180px; right: -50px; bottom: -50px; } }

@media (prefers-reduced-motion: reduce) {
  .pin { height: auto; }
  .pin__sticky { position: static; height: auto; padding-block: clamp(56px, 8vw, 100px); }
  .pin__stage { min-height: 0; display: grid; gap: 14px; }
  .step { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .art__wave, .art__beam, .art__plate { animation: none; }
}

/* usada só durante a medição das linhas do título */
.wmeasure { display: inline-block; }

/* ==========================================================================
   Os cinco cards, suspensos
   ---------------------------------------------------------------------------
   Antes: uma tabela emendada por fios de 1px — correta e inerte.
   Agora: cinco placas soltas, cada uma na sua altitude, com uma deriva lenta
   e fora de fase. O olho sobe da 01 até "Você", que flutua no ponto mais alto:
   a lista termina no leitor, e a composição diz isso antes do texto.

   Três decisões que sustentam o resto:

   1. A altitude vive dentro do @keyframes, não em margin. Deslocar por margem
      empurraria os vizinhos e deixaria os cards de alturas diferentes; por
      transform, a grade continua alinhada e nada reflui. Por isso os quadros
      0%/100% repetem translateY(var(--rest)) — a deriva oscila em torno da
      altitude de repouso em vez de anulá-la.

   2. --alt é um multiplicador, não um valor. As altitudes viram calc(step ×
      alt), então as media queries mexem num número só. Quando os cards
      quebram em duas linhas, altitude alta viraria sobreposição — por isso
      --alt cai pela metade no tablet e zera no celular.

   3. Nada de transform no :hover. O transform já é do @keyframes, e disputar a
      mesma propriedade produz salto. O card sobe pela sombra, que é o que o
      olho lê como altura de qualquer forma.
   ========================================================================== */

.built {
  --alt: 1;                       /* multiplicador global das altitudes */
  --gap: clamp(12px, 1.3vw, 18px);
  /* Colunas explícitas, não auto-fit: a altitude só é segura se soubermos
     onde a fila quebra. Com auto-fit o número de colunas varia com a largura
     e um card erguido da 2ª linha invade a 1ª. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;              /* senão a deriva seria recortada */
  padding-top: 80px;              /* excursão máxima do card central: 58 + 6 */
  margin-bottom: clamp(44px, 6vw, 72px);
}

.built__item {
  --step: 0;                      /* altitude de repouso, em px, por card */
  --amp: 8px;                     /* amplitude da deriva */
  --dur: 8s;
  --rest: calc(var(--step) * var(--alt) * 1px);

  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px 26px;
  box-shadow: var(--sh-1);
  transform: translateY(var(--rest));
  animation: builtDrift var(--dur) var(--ease) infinite;
  will-change: transform;
  transition: box-shadow .55s var(--ease-out),
              border-color .55s var(--ease),
              background .45s var(--ease);
}

@keyframes builtDrift {
  0%, 100% { transform: translateY(var(--rest)); }
  50%      { transform: translateY(calc(var(--rest) - var(--amp))); }
}

/* As altitudes desenham um arco com o pico no centro, onde está "Você": a
   composição aponta para o leitor sem precisar de cor ou seta. As pontas não
   são idênticas de propósito — simetria exata lê como gráfico, não como algo
   suspenso.

   Durações e atrasos são primos entre si: cada card entra já em outro ponto
   do ciclo, então o conjunto nunca pulsa junto — é o que separa "flutuando"
   de "piscando". */
.built__item:nth-child(1) { --step:  -4; --amp: 7px; --dur: 7.4s; animation-delay: -0.6s; }
.built__item:nth-child(2) { --step: -30; --amp: 9px; --dur: 9.1s; animation-delay: -3.2s; }
.built__item:nth-child(3) { --step: -58; --amp: 6px; --dur: 6.8s; animation-delay: -5.1s; }
.built__item:nth-child(4) { --step: -32; --amp: 8px; --dur: 8.6s; animation-delay: -1.9s; }
.built__item:nth-child(5) { --step:  -8; --amp: 7px; --dur: 7.9s; animation-delay: -4.3s; }

.built__item:hover {
  z-index: 2;
  box-shadow: var(--sh-3);
  border-color: color-mix(in srgb, var(--b2) 40%, var(--line));
}
.built__item:hover .built__n { color: var(--b2); }

/* --- o quinto é o leitor ------------------------------------------------- */
.built__item--voce {
  background: var(--wash);
  border-color: color-mix(in srgb, var(--b1) 24%, var(--line));
}
.built__item--voce:hover { border-color: color-mix(in srgb, var(--b1) 55%, var(--line)); }
.built__item--voce .built__n { color: var(--b2); }
.built__item--voce b { color: var(--b1); }

/* --- quando a fila quebra em linhas, a altitude precisa ceder -------------
   Em 3 colunas os cards 04 e 05 caem para a segunda linha erguidos em até
   ~38px (altitude × --alt + amplitude). O row-gap precisa ser maior que isso,
   senão a segunda linha encosta na primeira — era exatamente o que acontecia
   com auto-fit. Abaixo de 720px a altitude zera: em 1 ou 2 colunas ela só
   pareceria desalinhamento. A deriva continua, e é ela que o olho lê. */
@media (max-width: 1099px) {
  .built {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    --alt: .55;
    padding-top: 42px;
    row-gap: 52px;
  }
}
@media (max-width: 719px) {
  .built {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --alt: 0;
    padding-top: 0;
    row-gap: var(--gap);
  }
}
@media (max-width: 439px) {
  .built { grid-template-columns: minmax(0, 1fr); }
}

/* Quem pediu menos movimento mantém a composição e perde só a deriva:
   as altitudes continuam no transform de base. */
@media (prefers-reduced-motion: reduce) {
  .built__item { animation: none; transform: translateY(var(--rest)); }
}

/* ==========================================================================
   03. O que está em jogo — de grade para inventário
   ---------------------------------------------------------------------------
   O problema: a grade era auto-fit minmax(250px), que na largura máxima dá
   quatro colunas. Com seis itens sobravam duas células vazias na segunda
   linha — desequilíbrio que nenhum ajuste de cor resolve, porque é estrutural.

   Podia-se forçar 3×2 e acabou. Mas vale mais o contraste editorial: logo
   acima, o que a pessoa construiu FLUTUA — cards soltos, leves, em movimento.
   O que ela pode perder é o oposto: linhas empilhadas, pesadas, ancoradas,
   uma sob a outra como um inventário de dano. A forma passa a dizer o que o
   texto diz.

   E some o problema de origem: uma lista de linhas nunca tem resto. Seis
   itens, sete, quatro — nunca sobra célula, em nenhuma largura.
   ========================================================================== */

.stake__grid {
  display: block;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  border-top: 1px solid var(--line);
  margin-top: clamp(36px, 5vw, 56px);
}

.loss {
  position: relative;
  display: grid;
  grid-template-columns: 52px clamp(150px, 16vw, 230px) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px clamp(16px, 2.2vw, 30px);
  padding: clamp(18px, 2.1vw, 26px) clamp(10px, 1.4vw, 20px);
  border-bottom: 1px solid var(--line);
  background: none;
  transition: background .45s var(--ease);
}
.loss:hover { background: var(--paper-2); }

/* O número volta a ser um item da grade: era absoluto porque flutuava no
   canto do card; agora tem coluna própria e alinha na mesma base do nome. */
.loss::before {
  position: static;
  top: auto;
  right: auto;
  content: counter(perda, decimal-leading-zero);
}
.loss:hover::before { color: var(--b2); }

/* fio de acento que cresce na borda esquerda ao passar o mouse */
.loss::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--b2);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .5s var(--ease-out);
}
.loss:hover::after { transform: scaleY(1); }

/* O h3 vinha em caixa alta e azul — desenhado para a caixa antiga, onde era
   um rótulo. Aqui é o nome do ativo perdido: tinta cheia, caixa normal,
   tipografia de display. O azul fica reservado ao acento de hover, senão
   seis palavras berrantes competem entre si e nenhuma pesa. */
.loss h3 {
  padding-right: 0;
  margin-bottom: 0;
  font-size: var(--t-lg);
  letter-spacing: -.035em;
  text-transform: none;
  color: var(--ink);
}
/* A descrição sobe de --t-sm para --t-base: numa linha larga o texto pequeno
   deixava ~40% da faixa vazia à direita — o mesmo desequilíbrio da grade
   antiga, deitado. Com o corpo maior a linha se preenche, e o que sobra à
   direita vira margem, não buraco. O limite de 64ch mantém a medida legível. */
.loss p { font-size: var(--t-base); color: var(--ink-2); max-width: 64ch; }

/* No celular a descrição desce para baixo do nome, alinhada com ele. */
@media (max-width: 719px) {
  .loss {
    grid-template-columns: 42px minmax(0, 1fr);
    padding-inline: 4px;
  }
  .loss p { grid-column: 2; }
  .loss h3 { font-size: var(--t-md); }
}

/* ==========================================================================
   Rótulos de seção — o eyebrow deixa de ser sussurro
   ---------------------------------------------------------------------------
   Medido antes de mexer: o .tag saía em 11px contra um h2 de 57,6px — salto
   de 5,2×. Nessa distância o rótulo some, e ele é justamente quem nomeia a
   seção. Sobe para 15px com peso 600, e o tracking CAI de .18em para .13em:
   espaçamento largo funciona em texto miúdo e estica demais quando o corpo
   cresce.

   O :has(+ h2) restringe o aumento ao eyebrow de seção. Os outros .tag da
   base — passos do checkout, páginas de erro — não antecedem um h2 e ficam
   como estão, porque ali 11px é o tamanho certo para um chip.
   ========================================================================== */

.tag:has(+ h2) {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: .13em;
}
.tag:has(+ h2)::before { width: 34px; height: 2px; }
.tag + h2 { margin-top: 16px; }

/* ==========================================================================
   A jornada — zíper: os cards alternam os lados da espinha
   ---------------------------------------------------------------------------
   A versão anterior empilhava treze etapas numa coluna à esquerda e deixava
   dois terços da largura vazios. Aqui a espinha vai ao centro e os cards se
   revezam entre os lados, cada um entrando do seu próprio lado quando chega
   à tela. A largura passa a ser usada e a seção encurta pela metade.

   Os dois blocos do meio ficam CENTRADOS sobre a linha, e não de um lado:
   são dobradiças da história, não etapas, e é a posição que diz isso sem
   precisar de tamanho. Pela mesma razão o "Uma ameaça foi detectada" deixou
   de ser um painel vermelho inteiro — virou um selo sobre a linha. No fundo
   escuro aquele painel lia como erro de sistema, não como capítulo.

   A entrada é progressive enhancement: por padrão os cards estão VISÍVEIS.
   O JS só esconde e anima depois de confirmar que pode (sem
   prefers-reduced-motion). Se ele falhar, a seção aparece inteira, em vez de
   ficar uma coluna de cards invisíveis.
   ========================================================================== */

.fluxo__head { max-width: var(--measure); margin-bottom: clamp(44px, 6vw, 72px); }

.fluxo__trilha { position: relative; --p: 0; }

/* a espinha, centrada; parada dura em --p: acima é marca, abaixo é linha morta */
.fluxo__trilha::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--b2) 0%,
    var(--b2) calc(var(--p) * 100%),
    var(--line) calc(var(--p) * 100%),
    var(--line) 100%
  );
}

.fluxo__lista { list-style: none; display: grid; gap: clamp(18px, 2.4vw, 30px); }

/* O encaixe do zíper: como os cards de lados opostos nunca se cruzam na
   horizontal, cada degrau pode subir por cima da metade vazia do anterior.
   É isso que compacta — sem ele o zíper fica MAIS alto que a coluna única,
   porque cada linha reserva a altura de um card e usa só metade da largura.
   O valor é conservador e está verificado: zero sobreposições reais. */
@media (min-width: 860px) {
  .tl + .tl { margin-top: -34px; }
}

/* --- um degrau do zíper ---------------------------------------------------- */
.tl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  /* start, não center: com o encaixe do zíper a linha sobe, e um nó centrado
     na LINHA descola do card dele — os nós acabam se agrupando aos pares no
     meio da espinha e ninguém sabe mais qual pertence a qual. Alinhados pelo
     topo, nó e card sobem juntos e ficam sempre na mesma altura. */
  align-items: start;
}
/* grid-row: 1 explícito nos três. Sem isso o posicionamento automático do
   grid manda o card da ESQUERDA para uma segunda linha: o nó vem antes no
   HTML e ocupa a coluna 2, e o algoritmo esparso não volta atrás para
   preencher a coluna 1 da mesma linha. O sintoma era linhas ímpares com
   171px em vez de 107px, e o nó pairando acima do próprio card.
   O filho direto também protege o nó do bloco-dobradiça, que não vive
   nesta grade de três colunas. */
.tl > .tl__no { grid-column: 2; grid-row: 1; justify-self: center; margin-top: 12px; }
.tl--esq .tl__card { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.tl--dir .tl__card { grid-column: 3; grid-row: 1; justify-self: start; }

.tl__no {
  position: relative;
  z-index: 1;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-3);
  transition: color .45s var(--ease), border-color .45s var(--ease),
              background .45s var(--ease), box-shadow .45s var(--ease-out);
}
.tl__no svg { width: 19px; height: 19px; }

/* acende quando a leitura ultrapassa o nó */
.tl.is-passed .tl__no {
  color: var(--on-brand);
  background: var(--b1);
  border-color: var(--b1);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--b1) 12%, transparent);
}

/* position: relative não é decorativo aqui. A espinha é um pseudo-elemento
   ABSOLUTO do contêiner, e elemento posicionado pinta por cima de filho
   estático — a linha atravessava o texto do card centrado. Posicionando o
   card, ele volta para cima da linha e a corta, que é o que se quer. */
.tl__card {
  position: relative;
  z-index: 1;
  max-width: 38ch;
  padding: 20px 22px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--sh-1);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease-out);
}
.tl__card:hover { box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--b2) 34%, var(--line)); }

.tl__n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--line-2);
  margin-bottom: 4px;
  transition: color .45s var(--ease);
}
.tl.is-passed .tl__n { color: var(--b2); }
.tl__card h3 { font-size: var(--t-md); letter-spacing: -.03em; margin-bottom: 3px; }
.tl__card p  { font-size: var(--t-sm); color: var(--ink-2); }
.tl__card--chegada h3 { color: var(--b1); }

/* --- a entrada, cada um do seu lado ---------------------------------------- */
.fluxo.is-animado .tl__card {
  opacity: 0;
  transform: translateX(var(--vem, 0));
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.fluxo.is-animado .tl--esq .tl__card { --vem: -54px; }
.fluxo.is-animado .tl--dir .tl__card { --vem:  54px; }
.fluxo.is-animado .tl.is-in .tl__card { opacity: 1; transform: none; }

/* --- as duas dobradiças, centradas sobre a linha --------------------------- */
.tl__marco {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-block: clamp(26px, 3.4vw, 40px);
}
.tl__no--marco {
  border-color: color-mix(in srgb, var(--b1) 30%, var(--line));
  color: var(--b1);
}
.tl__card--marco {
  max-width: 58ch;
  text-align: center;
  background: var(--ink-bg);
  border-color: transparent;
  color: var(--on-ink);
  padding: 24px 28px 26px;
}
.tl__card--marco h3 { color: var(--on-ink); font-size: var(--t-lg); margin-bottom: 6px; }
.tl__card--marco p  { color: var(--on-ink-2); font-size: var(--t-base); }

/* o selo: um rótulo sobre a linha, não um painel. O fundo opaco é o que
   corta a espinha — e esse corte é o que anuncia a virada. */
.tl__selo {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: clamp(26px, 3.4vw, 40px) auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--alert-line);
  background: var(--alert-bg);
  color: var(--alert-fg);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tl__selo__i { display: grid; place-items: center; }
.tl__selo__i svg { width: 16px; height: 16px; }

/* --- no estreito a espinha volta para a esquerda --------------------------- */
@media (max-width: 859px) {
  .fluxo__trilha::before { left: 21px; transform: none; }
  .tl { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
  /* precisa do mesmo combinador de filho do desktop: `.tl__no` sozinho perde
     em especificidade para `.tl > .tl__no`, o nó continuava na coluna 2 e
     ficava escondido embaixo do card. */
  .tl > .tl__no { grid-column: 1; grid-row: 1; width: 42px; height: 42px; margin-top: 10px; }
  .tl__no svg { width: 17px; height: 17px; }
  .tl--esq .tl__card,
  .tl--dir .tl__card { grid-column: 2; justify-self: stretch; text-align: left; max-width: none; }
  /* todos entram do mesmo lado: alternar em coluna única só embaralha */
  .fluxo.is-animado .tl--esq .tl__card,
  .fluxo.is-animado .tl--dir .tl__card { --vem: 34px; }

  .tl__marco { justify-items: stretch; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .tl__card--marco { text-align: left; max-width: none; }
  .tl__selo { margin-inline: 0; }
}

/* --- "Você" na faixa de perfis ---------------------------------------------
   A faixa é uma fita dupla: a animação anda até translateX(-50%), então as
   duas metades precisam ser idênticas — por isso "Você" aparece duas vezes no
   HTML e uma só na tela. Entra apenas na primeira faixa: nas duas, o leitor
   se veria duplicado e a palavra perderia o peso.
   O seletor tem a mesma especificidade dos nth-of-type que colorem a fita, e
   vem depois no arquivo justamente para vencer o empate. */
.rows__track span.rows__voce { color: var(--b1); }
.rows__track span.rows__voce:hover { color: var(--b2); }

/* --- Cartões de plano: mesma altura, botões na mesma linha -----------------
   A grade vinha com align-items: start, então cada cartão parava na altura do
   próprio conteúdo — com listas de 4, 5, 7 e 9 itens, os "Quero me blindar"
   ficavam em quatro alturas diferentes. Numa tabela de preços compara-se na
   HORIZONTAL, e degrau de botão atrapalha exatamente essa leitura.

   O alinhamento já estava previsto no componente: .line é flex em coluna e
   .line .btn tem margin-top: auto. Só faltava deixar o cartão esticar. */
.lines__grid { align-items: stretch; }

/* =========================================================================
   A NOVA REALIDADE — fundo fotográfico
   Entrou no lugar da foto com os selos "Conta protegida" / "Nenhuma ameaça".

   As duas fotos têm o espaço livre em lados OPOSTOS: a escura é limpa nos
   60% da direita, a clara nos 30% da esquerda. Por isso o texto não pode
   simplesmente ocupar "o lado vazio" — não existe um que sirva aos dois.
   A saída tem duas partes. Primeiro, a foto escura foi ESPELHADA no arquivo,
   para a pessoa cair do mesmo lado nas duas (direita) e o espaço limpo ficar
   sempre à esquerda. Depois, um véu na cor do tema cobre a faixa do texto.
   Assim a coluna fica no mesmo lugar nos dois temas e ninguém é velado.

   O véu é OPACO até 46% da largura, não um degradê desde a borda. Isso não é
   gosto: com o degradê começando em 0 o parágrafo caía para 3.17:1 de
   contraste no tema escuro, abaixo dos 4.5 exigidos. Opaco até o fim da
   coluna devolve o contraste do fundo liso, e a foto só começa a aparecer
   depois que o texto acabou.
   ========================================================================= */
.reality { position: relative; isolation: isolate; }
.reality > .wrap { position: relative; z-index: 2; }

.reality__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  /* fundo discreto: a foto dá atmosfera, o texto é que manda na seção */
  opacity: .46;
}

/* O véu. Sai da cor de fundo da página, então acompanha o tema sozinho e
   emenda sem costura com as seções de cima e de baixo. */
.reality::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      var(--paper) 0% 46%,
      color-mix(in srgb, var(--paper) 72%, transparent) 58%,
      color-mix(in srgb, var(--paper) 24%, transparent) 70%,
      transparent 80%),
    linear-gradient(to bottom,
      var(--paper) 0%,
      transparent 14% 86%,
      var(--paper) 100%);
}

/* tema claro (padrão) */
.reality__bg {
  background-image: url("../img/fotos/realidade-clara.jpg");
  background-image: image-set(
    url("../img/fotos/realidade-clara.webp") type("image/webp"),
    url("../img/fotos/realidade-clara.jpg")  type("image/jpeg"));
}

/* tema escuro — por botão e por preferência do sistema */
:root[data-theme="dark"] .reality__bg {
  background-image: url("../img/fotos/realidade-escura.jpg");
  background-image: image-set(
    url("../img/fotos/realidade-escura.webp") type("image/webp"),
    url("../img/fotos/realidade-escura.jpg")  type("image/jpeg"));
  opacity: .92;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reality__bg {
    background-image: url("../img/fotos/realidade-escura.jpg");
    background-image: image-set(
      url("../img/fotos/realidade-escura.webp") type("image/webp"),
      url("../img/fotos/realidade-escura.jpg")  type("image/jpeg"));
    opacity: .92;
  }
}

/* A coluna não precisa mais dividir espaço com a foto, mas também não pode
   ocupar a largura toda: o texto correria por cima da pessoa. */
.reality__grid { grid-template-columns: minmax(0, 1fr); }
.reality__in   { max-width: 56ch; }

/* No celular a foto vira quase só textura: não há largura para ela respirar
   ao lado do texto, e legibilidade ganha de atmosfera. */
@media (max-width: 760px) {
  .reality__bg { opacity: .22; background-position: center; }
  .reality::after {
    background:
      linear-gradient(to bottom,
        var(--paper) 0%,
        color-mix(in srgb, var(--paper) 72%, transparent) 50%,
        var(--paper) 100%);
  }
  :root[data-theme="dark"] .reality__bg { opacity: .42; }
}

/* Quem pediu menos movimento não perde nada aqui: o fundo já é estático.
   Mantido explícito para o caso de alguém animar isto depois. */
@media (prefers-reduced-motion: reduce) {
  .reality__bg { transition: none; }
}

/* =========================================================================
   ONDAS DE FUNDO — seção "Como protegemos"
   Verticais de propósito: correm no mesmo sentido do scroll, e por isso o
   movimento lê como continuação da rolagem em vez de enfeite.
   ========================================================================= */
.fluxo { position: relative; isolation: isolate; overflow: hidden; --p: 0; }
.fluxo > .wrap { position: relative; z-index: 2; }

.ondas__caixa {
  position: absolute;
  /* Sangra para fora, e embaixo bem mais que em cima: a faixa SOBE até 430px
     com o scroll, então sem essa folga o fim da seção aparecia vazio. */
  inset: -6% -16% -22%;
  z-index: 0;
  pointer-events: none;
  /* As ondas só começam DEPOIS do cabeçalho, e somem antes do fim da seção.
     O corte de cima não é estética: medido, o cabeçalho acaba aos 15% da
     altura da seção, e com as ondas passando atrás dele o parágrafo caía
     para 4.24:1 de contraste no tema escuro — abaixo dos 4.5 exigidos.
     Começar aos 20% devolve o texto ao fundo liso e ainda deixa as ondas
     cobrirem toda a trilha, que é onde elas têm função. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 14%, #000 24% 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0 14%, #000 24% 94%, transparent 100%);
}

.ondas {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--ink-3);
  stroke-width: 1;
  /* a espessura não acompanha o scale(x) dos <use>: sem isto as linhas de
     amplitude maior ficariam mais grossas que as de dentro */
  vector-effect: non-scaling-stroke;
  opacity: .34;
}
:root[data-theme="dark"] .ondas { opacity: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ondas { opacity: .5; }
}

/* O movimento. Cada feixe desliza numa velocidade diferente conforme --p vai
   de 0 a 1 ao longo da seção — é a mesma variável que move a espinha do
   zíper, então as duas coisas andam juntas em vez de brigar.
   Só com .is-animado: sem JS, ou com menos movimento pedido, fica parado. */
.fluxo.is-animado .ondas__faixa {
  transform: translateY(calc(var(--p) * var(--vel, 0) * 1px));
  will-change: transform;
}
/* A faixa tem nome em vez de posição: nth-child contaria o <defs> como
   primeiro filho do <svg> e a conta sairia errada.

   -430px ao longo da seção. Parece muito e não é: a seção passa dos 2300px,
   então isso é menos de 20% da altura. A versão anterior usava 150px, que dá
   6% — e na prática ninguém via movimento nenhum. */
.fluxo.is-animado .ondas__faixa--1 { --vel: -430; }

@media (prefers-reduced-motion: reduce) {
  .fluxo .ondas__faixa { transform: none; will-change: auto; }
}

/* No celular a seção é estreita e alta: a onda vira quase textura. */
@media (max-width: 760px) {
  .ondas { opacity: .22; }
  :root[data-theme="dark"] .ondas { opacity: .34; }
}