/* ══════════════════════════════════════════════════════════════════
   PORTELA CUNHA ADVOCACIA — experiência cinematográfica
   Direção: quase-preto azulado ◆ branco quente ◆ ouro em detalhes
   mínimos ◆ tipografia monumental ◆ objeto protagonista em camadas.
   Stack: HTML + CSS + GSAP/ScrollTrigger/Lenis (vendor local).
   ══════════════════════════════════════════════════════════════════ */

:root {
  --tinta: #0a111d;
  --marinho: #111c2d;
  --azul: #223f5f;
  --papel: #f3eee3;
  --papel-2: rgba(243, 238, 227, 0.6);
  --papel-3: rgba(243, 238, 227, 0.38);
  --ouro: #bb9b61;
  --areia: #dcbe87;
  --fio: rgba(243, 238, 227, 0.14);
  --fio-suave: rgba(243, 238, 227, 0.07);
  --fio-ouro: rgba(187, 155, 97, 0.4);

  --sans: "Montserrat", "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --borda: clamp(1.25rem, 4.5vw, 4.5rem);
}

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

html:not(.js) { scroll-behavior: smooth; }
html.js { scroll-behavior: auto; } /* Lenis assume a suavidade — nunca os dois juntos */
html.js { overflow-anchor: none; } /* âncora nativa briga com cenas presas via pin */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.travado { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
i, em { font-style: normal; }

::selection { background: var(--areia); color: var(--tinta); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--tinta); }
::-webkit-scrollbar-thumb { background: #24334a; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ouro); }
:focus-visible { outline: 1.5px solid var(--areia); outline-offset: 4px; }

.kicker {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ouro);
}
.apagado { color: var(--papel-3); }

/* aparições — só escondemos quando há JS para revelar */
html.js .surgir { opacity: 0; }

/* ═══ véu ═══ */
.veu {
  position: fixed;
  inset: 0;
  background: var(--tinta);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
.veu-simbolo { width: clamp(64px, 8vw, 92px); opacity: 0.95; }
.veu-linha {
  width: min(240px, 40vw);
  height: 1px;
  background: var(--fio);
  position: relative;
  overflow: hidden;
}
.veu-linha::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--areia);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.veu-nome {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  color: var(--papel-3);
}

/* ═══ entrada cinematográfica — a marca nasce ═══
   véu (carregamento) → espaço profundo com duas presenças → animação
   Blender aprovada → a logo formada assenta na tela do celular do hero */
.intro {
  position: fixed;
  inset: 0;
  z-index: 900; /* sobre nav (110) e emergência */
  display: none;
  overflow: hidden;
}
html.js .intro { display: block; } /* primeiro paint já é a entrada */
.intro.ativa { display: block; }
.intro-fundo {
  position: absolute;
  inset: 0;
  background:
    /* palco de ar atrás da marca — respiro neutro, quase imperceptível */
    radial-gradient(60% 46% at 50% 40%, rgba(28, 34, 44, 0.55), transparent 68%),
    /* piso que mergulha no negro */
    linear-gradient(180deg, transparent 56%, rgba(0, 0, 0, 0.88) 78%, #000 100%),
    /* teto profundo */
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 26%),
    /* vinheta */
    radial-gradient(130% 100% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.94) 100%),
    linear-gradient(180deg, #030405 0%, #07090c 46%, #020304 100%);
}
/* palco: uma luz central que acende conforme a marca se constrói */
.intro-luz {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(46% 36% at 50% 42%, rgba(56, 66, 82, 0.4), transparent 70%);
  pointer-events: none;
}
/* horizonte: um fio de ouro distante — a linha que um dia sobe */
.intro-horizonte {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 71%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 190, 135, 0.5) 30%, rgba(220, 190, 135, 0.75) 50%, rgba(220, 190, 135, 0.5) 70%, transparent);
  box-shadow: 0 0 18px rgba(220, 190, 135, 0.28), 0 0 60px rgba(187, 155, 97, 0.14);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 2.2s ease, transform 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.intro.acesa .intro-horizonte { opacity: 0.85; transform: scaleX(1); }
/* o espelho do palco: as peças de ouro refletidas no piso */
.intro-reflexo {
  position: absolute;
  transform: scaleY(-1);
  filter: blur(5px) saturate(1.12) brightness(0.95);
  opacity: 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 72%);
  pointer-events: none;
}
/* grão de película — quase imperceptível, mata o "flat digital" */
.intro-grao {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}
.intro video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* barras fundem com o fundo — mesma atmosfera */
  opacity: 0;
}
/* duas presenças: uma densa e fria, funda; outra dourada, ascendente —
   véus de luz, não objetos */
.intro-presenca {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
}
.intro-presenca-a {
  background: radial-gradient(46% 38% at 22% 26%, rgba(44, 58, 78, 0.34), transparent 70%);
  animation: presencaA 7s ease-in-out infinite alternate;
}
.intro-presenca-b {
  background: radial-gradient(40% 34% at 78% 82%, rgba(220, 190, 135, 0.12), transparent 72%);
  animation: presencaB 8s ease-in-out infinite alternate;
}
.intro.ativa .intro-presenca { opacity: 1; transition: opacity 1.2s ease; }
@keyframes presencaA {
  from { transform: translate3d(-2%, 1.5%, 0) scale(1); }
  to   { transform: translate3d(2%, -1%, 0) scale(1.06); }
}
@keyframes presencaB {
  from { transform: translate3d(1.5%, 2%, 0) scale(1.04); }
  to   { transform: translate3d(-1.5%, -2.5%, 0) scale(1); }
}
.intro-logo {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.intro-pular {
  position: absolute;
  right: clamp(1.2rem, 3vw, 2.6rem);
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  background: none;
  border: 0;
  color: var(--papel-3);
  font: 600 0.6rem/1 var(--sans);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease, color 0.3s ease;
}
.intro-pular i { font-style: normal; color: var(--ouro); }
.intro-pular.visivel { opacity: 0.7; }
.intro-pular:hover { color: var(--papel); opacity: 1; }

/* ═══ navegação ═══ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem var(--borda);
  mix-blend-mode: difference;
}
.nav-marca {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #fff;
}
.nav-marca i { color: var(--areia); margin: 0 0.5em; font-weight: 400; }
.nav-capsula {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  padding: 0.55rem 1.15rem;
  transition: border-color 0.3s;
}
.nav-capsula:hover { border-color: rgba(255, 255, 255, 0.8); }
.nc-texto { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.3em; color: #fff; }
.nc-tracos { display: grid; gap: 4px; }
.nc-tracos i {
  display: block;
  width: 16px; height: 1.5px;
  background: #fff;
  transition: transform 0.4s var(--curva);
}
body.menu-aberto .nc-tracos i:first-child { transform: translateY(2.75px) rotate(45deg); }
body.menu-aberto .nc-tracos i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ═══ menu overlay ═══ */
.menu { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.menu-fundo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 80% 10%, rgba(34, 63, 95, 0.5), transparent 60%),
    var(--marinho);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s var(--curva);
}
body.menu-aberto .menu { visibility: visible; pointer-events: auto; }
body.menu-aberto .menu-fundo { clip-path: inset(0 0 0% 0); }
.menu-corpo {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem var(--borda) 2rem;
}
.menu-lista { margin-bottom: auto; padding-top: 2vh; }
.menu-item {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  width: fit-content;
  padding: 0.3rem 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.55s var(--curva), transform 0.55s var(--curva);
}
body.menu-aberto .menu-item { opacity: 1; transform: none; }
body.menu-aberto li:nth-child(1) .menu-item { transition-delay: 0.24s; }
body.menu-aberto li:nth-child(2) .menu-item { transition-delay: 0.3s; }
body.menu-aberto li:nth-child(3) .menu-item { transition-delay: 0.36s; }
body.menu-aberto li:nth-child(4) .menu-item { transition-delay: 0.42s; }
body.menu-aberto li:nth-child(5) .menu-item { transition-delay: 0.48s; }
body.menu-aberto li:nth-child(6) .menu-item { transition-delay: 0.54s; }
body.menu-aberto li:nth-child(7) .menu-item { transition-delay: 0.6s; }
body.menu-aberto li:nth-child(8) .menu-item { transition-delay: 0.66s; }
.menu-item i {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ouro);
  transition: transform 0.35s var(--curva);
}
.menu-item span {
  font-weight: 700;
  font-size: clamp(2rem, 6.4vh, 4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--papel-2);
  transition: color 0.3s, letter-spacing 0.4s var(--curva);
}
.menu-item:hover span { color: var(--papel); letter-spacing: 0.005em; }
.menu-item:hover i { transform: translateX(6px); }
.menu-pe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  border-top: 1px solid var(--fio);
  padding-top: 1.3rem;
  font-size: 0.78rem;
  color: var(--papel-3);
  opacity: 0;
  transition: opacity 0.5s 0.55s;
}
body.menu-aberto .menu-pe { opacity: 1; }
.menu-pe a { color: var(--areia); font-weight: 600; letter-spacing: 0.1em; }

/* ═══ cápsula de emergência ═══ */
.emergencia {
  position: fixed;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(17, 28, 45, 0.82);
  border: 1px solid var(--fio);
  border-radius: 99px;
  padding: 0.8rem 1.3rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.35s, transform 0.35s var(--curva);
}
.emergencia:hover { border-color: var(--fio-ouro); transform: translateY(-2px); }
.em-ponto {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--areia);
  animation: em-pulsa 2.2s infinite;
}
@keyframes em-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 190, 135, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(220, 190, 135, 0); }
}
.em-rotulo { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.26em; white-space: nowrap; }
.em-detalhe {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--papel-3);
  transition: max-width 0.6s var(--curva);
}
.emergencia:hover .em-detalhe, .emergencia:focus-visible .em-detalhe { max-width: 220px; }

/* ═══ O TELEFONE — camada fixa ═══ */
.tel-camada {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: none;
  perspective: 1400px;
}
.tel {
  position: relative;
  width: clamp(220px, 20vw, 292px);
  aspect-ratio: 0.487;
  transform-style: preserve-3d;
  will-change: transform;
}
.tel-flutua {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: tel-respira 6.5s ease-in-out infinite;
}
@keyframes tel-respira {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50% { transform: translateY(-9px) rotateZ(0.7deg); }
}
.tel-verso, .tel-lamina, .tel-frente {
  position: absolute;
  inset: 0;
  border-radius: 13.5% / 6.6%;
}
.tel-verso {
  transform: translateZ(-6px);
  background: radial-gradient(120% 90% at 30% 8%, #263650 0%, #141f31 50%, #0d1524 100%);
  border: 1px solid #2c3a52;
}
.tel-lamina { background: #141f31; border: 1px solid #24324a; }
.tl1 { transform: translateZ(-3px); }
.tl2 { transform: translateZ(0); background: #18243a; }
.tl3 { transform: translateZ(3px); }
.tel-frente {
  transform: translateZ(6px);
  background: #04070d;
  border: 1px solid #2c3a52;
  padding: 3.2%;
  box-shadow:
    inset 0 0 0 2px rgba(187, 155, 97, 0.12),
    0 60px 120px -40px rgba(0, 0, 0, 0.85);
}
.tel-tela {
  width: 100%; height: 100%;
  border-radius: 11% / 5.3%;
  background:
    radial-gradient(130% 100% at 80% 0%, #fbf8f1 0%, #efe8da 60%, #e7decb 100%),
    #f4efe3;
  overflow: hidden;
  position: relative;
  padding: 7.5%;
  color: #13233c;
}
/* vidro do aparelho: reflexo de estúdio renderizado no Blender (screen: só a luz aparece) */
.tel-tela::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("marca/reflexo-tela-web.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0.3;
  pointer-events: none;
}
.tt-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(0.5rem, 0.56vw, 0.62rem);
  font-weight: 600;
  color: #13233c;
}
.tt-status i { width: 33%; height: 8px; border-radius: 99px; background: #0b1220; }
.tt-status b:last-child { color: var(--ouro); }
.tt-etq {
  font-size: clamp(0.5rem, 0.56vw, 0.6rem);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ouro);
}
.tt-estado {
  position: absolute;
  inset: 13% 9% 8%;
  display: flex;
  flex-direction: column;
  gap: 5%;
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  filter: blur(5px);
  transition: opacity 0.65s var(--curva), transform 0.65s var(--curva), filter 0.65s var(--curva);
  pointer-events: none;
}
.tt-estado.on { opacity: 1; transform: none; filter: blur(0); }

/* BRAND MODE — headlines monumentais: só a marca, silêncio e respiro */
.e-marca { align-items: center; justify-content: center; }
.tt-marca {
  width: 74%;
  max-width: 200px;
  filter: contrast(1.08) saturate(1.12) drop-shadow(0 10px 24px rgba(19, 35, 60, 0.18));
}

/* BRAND MODE de Mariane — o aparelho muda de voz junto com a casa */
.e-mariane { align-items: center; justify-content: center; gap: 8%; }
.tt-marca-m {
  width: 88%;
  filter: contrast(1.1) saturate(1.15) drop-shadow(0 10px 24px rgba(19, 35, 60, 0.16));
}
.tt-ramo {
  font-size: clamp(0.44rem, 0.5vw, 0.54rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #8a97a9;
}
.tt-simbolo { width: 27%; margin-bottom: 1%; }
.tt-titulo {
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.4rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: #13233c;
}
.tt-sub { font-size: clamp(0.56rem, 0.66vw, 0.7rem); color: #5d6b80; line-height: 1.65; }
.tt-botao {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  font-size: clamp(0.52rem, 0.6vw, 0.64rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #10213a;
  background: linear-gradient(115deg, var(--areia), var(--ouro));
  border-radius: 99px;
  padding: 1.05em;
  box-shadow: 0 10px 26px -10px rgba(187, 155, 97, 0.55);
}
.tt-passo {
  font-size: clamp(0.5rem, 0.56vw, 0.6rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--ouro);
}
.tt-pergunta {
  font-weight: 700;
  font-size: clamp(0.78rem, 1vw, 1.02rem);
  line-height: 1.3;
  margin-bottom: 2%;
  color: #13233c;
}
.tt-opcao {
  font-size: clamp(0.54rem, 0.64vw, 0.68rem);
  font-weight: 600;
  border: 1px solid rgba(19, 35, 60, 0.22);
  border-radius: 9px;
  padding: 0.75em 1em;
  color: #33465f;
  background: rgba(255, 255, 255, 0.55);
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.tt-opcao.marcada, .tt-opcao.eco {
  border-color: #13233c;
  color: #0f1e34;
  background: rgba(19, 35, 60, 0.08);
}
.tt-opcao.mais {
  border-style: dashed;
  text-align: center;
  color: #7b8798;
  background: transparent;
}
.tt-nota {
  margin-top: auto;
  text-align: center;
  font-size: clamp(0.46rem, 0.52vw, 0.56rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7b8798;
}
.tt-campo {
  border-bottom: 1px solid rgba(19, 35, 60, 0.3);
  padding: 0.9em 0.2em;
  font-size: clamp(0.62rem, 0.72vw, 0.78rem);
  color: #7b8798;
  position: relative;
}
.tt-campo i {
  position: absolute;
  right: 0.2em; top: 50%;
  width: 1.5px; height: 1em;
  background: var(--ouro);
  transform: translateY(-50%);
  animation: tt-cursor 1.1s steps(2) infinite;
}
@keyframes tt-cursor { 50% { opacity: 0; } }

/* ═══ tipografia monumental em camadas ═══ */
.monumento {
  position: relative;
  display: grid;
  width: 100%;
}
.mon-camada {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mon-linha {
  display: block;
  font-weight: 800;
  font-size: clamp(3rem, 12.8vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--papel);
}
.oca { visibility: hidden !important; }
.monumento.menor .mon-linha { font-size: clamp(2.7rem, 11vw, 10rem); }

/* camadas frontais fixas — vivem FORA das cenas presas, acima do aparelho.
   mix-blend difference: a letra permanece clara sobre o escuro e INVERTE
   para azul-noite exatamente onde cruza a tela clara do aparelho. */
.frente-fixa {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  mix-blend-mode: difference;
}
.frente-fixa .mon-linha { color: #f2ece0; }

/* alinhamento editorial vivo das linhas do hero (cena e camada fixa iguais) */
.hero .l1, .ff-hero .l1 { position: relative; left: 3.5vw; }
.hero .l2, .ff-hero .l2 { position: relative; left: -9vw; }
.hero .l3, .ff-hero .l3 { position: relative; left: 6.5vw; }
.ff-hero { padding: 6rem var(--borda) 5rem; }
.ff-pilares { padding: 6rem var(--borda); gap: 3rem; }
.ff-bloco { display: flex; flex-direction: column; align-items: center; }
.ff-pilares .mon-linha { font-size: clamp(2.7rem, 11vw, 10rem); }
html:not(.js) .frente-fixa { display: none; }

/* ═══ cenas presas (sticky — preserva as camadas de profundidade) ═══ */
.ato-hero { height: 270vh; position: relative; }
.ato-pilares { height: 250vh; position: relative; }
.ato-triagem { height: 230vh; position: relative; }
.ato-travessia { height: 260vh; position: relative; }
.ato-missao { height: 340vh; position: relative; }

/* ═══ 06 · travessia — a cor da casa muda enquanto o aparelho gira ═══ */
.travessia {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.6rem;
  padding: 6rem var(--borda);
  background: var(--tinta);
  overflow: clip;
}
.trav-kicker { margin-bottom: 0; }
.trav-frase { display: flex; flex-direction: column; }
.tv-l {
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 6.6rem);
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--papel);
}
.tv-l em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ouro);
}
.trav-id { display: flex; flex-direction: column; gap: 1rem; opacity: 0; }
/* o movimento do aparelho deixa um rastro que se transforma na linha de Mariane */
.trav-rastro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.trav-rastro path {
  fill: none;
  stroke: var(--areia);
  stroke-width: 2;
  opacity: 0.85;
  filter: drop-shadow(0 0 12px rgba(220, 190, 135, 0.4));
}
/* a assinatura se escreve: máscara de caneta + bico de pena dourado */
.trav-escrita { position: relative; display: inline-block; }
.trav-marca {
  width: min(340px, 44vw);
  display: block;
  -webkit-mask-image: linear-gradient(102deg, #000 calc(var(--escreve, 1) * 108% - 7%), transparent calc(var(--escreve, 1) * 108% + 1%));
  mask-image: linear-gradient(102deg, #000 calc(var(--escreve, 1) * 108% - 7%), transparent calc(var(--escreve, 1) * 108% + 1%));
}
.trav-pena {
  position: absolute;
  top: 46%;
  left: calc(var(--escreve, 1) * 100%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--areia);
  box-shadow: 0 0 12px rgba(220, 190, 135, 0.85), -16px 3px 20px rgba(220, 190, 135, 0.3);
  opacity: calc(4 * var(--escreve, 1) * (1 - var(--escreve, 1)));
  pointer-events: none;
}
.trav-cargo {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(22, 35, 58, 0.55);
}

/* ═══ 08 · missão — o que estava invisível torna-se visível ═══ */
.missao {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 6rem var(--borda);
  background:
    radial-gradient(70% 60% at 50% 24%, rgba(34, 63, 95, 0.45), transparent 62%),
    var(--tinta);
  overflow: clip;
}
.mi-fase { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.mi-bloco { display: flex; flex-direction: column; }
.mi-bloco span {
  font-weight: 800;
  font-size: clamp(2.2rem, 6.2vw, 5.8rem);
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
.mi-bloco.b span { color: var(--papel-2); }
.mi-apaga { color: var(--areia) !important; }
.mi-parede {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.6vh, 1.2rem);
  opacity: 0;
}
.mi-parede i {
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--papel);
  opacity: 0.06;
  white-space: nowrap;
}
.mi-parede i:first-child {
  font-size: clamp(2rem, 4.8vw, 4.4rem);
  color: var(--areia);
}
.mi-luz {
  position: absolute;
  top: -22%;
  left: 0;
  width: 17vw;
  height: 144%;
  background: linear-gradient(90deg, transparent, rgba(220, 190, 135, 0.16) 30%, rgba(220, 190, 135, 0.3) 50%, rgba(220, 190, 135, 0.16) 70%, transparent);
  transform: rotate(9deg);
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
}
.mi-fecho .mi-frase {
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.mi-fecho .mi-frase em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--areia);
}
.mi-fecho .mi-ass {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ouro);
}
.mi-fecho, .mi-parede { will-change: opacity; }

/* ═══ 09 · auxílio-acidente — editorial em página clara ═══ */
.claro-sec {
  background:
    radial-gradient(70% 50% at 84% 8%, rgba(220, 190, 135, 0.2), transparent 60%),
    #efe8d8;
  color: #16233a;
}
.claro-sec ::selection { background: var(--marinho); color: var(--papel); }
.auxilio { padding: 0 0 clamp(7rem, 14vh, 11rem); }
.aux-editorial { padding: clamp(4rem, 8vh, 6rem) var(--borda) 0; }

/* cena presa do Auxílio-Acidente: uma pergunta monumental por vez */
.ato-aux { height: 300vh; position: relative; }
.aux-cena {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 6rem var(--borda);
  overflow: clip;
}
.ax-indice { position: absolute; top: 6.2rem; left: var(--borda); }
.ax-fase {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
  opacity: 0;
}
.ax-pergunta {
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
.ax-pergunta em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ouro);
}
.ax-sub {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(22, 35, 58, 0.5);
}
.ax-conclusao .ax-pergunta { color: #10213a; }
.aux-titulo {
  margin: 1.4rem 0 1.2rem;
  font-weight: 800;
  font-size: clamp(2.2rem, 5.6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
.aux-titulo em, .aux-tempo-t em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ouro);
}
.aux-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: rgba(22, 35, 58, 0.72);
  max-width: 46ch;
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.aux-perguntas { border-top: 1px solid rgba(22, 35, 58, 0.16); max-width: 940px; }
.aux-p {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  grid-template-areas: "n t" ". s";
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.9rem) 0.2rem;
  border-bottom: 1px solid rgba(22, 35, 58, 0.1);
}
.aux-p i { grid-area: n; font-family: var(--serif); font-size: 1rem; color: var(--ouro); }
.aux-p b {
  grid-area: t;
  font-weight: 800;
  font-size: clamp(1.25rem, 2.7vw, 2.3rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.008em;
}
.aux-p span {
  grid-area: s;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(22, 35, 58, 0.5);
}
.aux-nota {
  margin: clamp(3rem, 7vh, 5rem) 0 1.6rem;
  font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  text-transform: uppercase;
  max-width: 40ch;
}
.aux-nota em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  color: rgba(22, 35, 58, 0.68);
}
.aux-def {
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.9;
  color: rgba(22, 35, 58, 0.66);
  max-width: 64ch;
}
.aux-tempo {
  margin-top: clamp(5rem, 11vh, 8rem);
  padding-top: clamp(3rem, 6vh, 4.5rem);
  border-top: 1px solid rgba(22, 35, 58, 0.16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  max-width: 1080px;
}
.aux-tempo-t {
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4.2rem);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.aux-tempo-p {
  font-weight: 800;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  line-height: 1.25;
  text-transform: uppercase;
}
.aux-tempo-n {
  grid-column: 2;
  font-size: 0.9rem;
  line-height: 1.9;
  color: rgba(22, 35, 58, 0.66);
  max-width: 52ch;
}
.aux-lei {
  margin-top: clamp(4rem, 9vh, 6.5rem);
  display: flex;
  align-items: baseline;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border-left: 2px solid var(--ouro);
  padding-left: clamp(1.5rem, 3.5vw, 2.8rem);
  max-width: 880px;
}
.aux-lei > b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: 0.9;
  color: var(--ouro);
}
.aux-lei-t {
  font-weight: 800;
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 0.7rem;
}
.aux-lei-p { font-size: 0.88rem; line-height: 1.85; color: rgba(22, 35, 58, 0.66); max-width: 58ch; }

/* ═══ 01 · hero ═══ */
.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem var(--borda) 5rem;
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(34, 63, 95, 0.4), transparent 60%),
    var(--tinta);
  overflow: clip;
}
.hero-cantos { position: absolute; inset: 0; padding: 5.2rem var(--borda) 1.6rem; pointer-events: none; }
.hc {
  position: absolute;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--papel-3);
  line-height: 2;
}
.ha { top: 5.4rem; left: var(--borda); }
.hb { top: 5.4rem; right: var(--borda); text-align: right; }
.hc2 { bottom: 5rem; left: var(--borda); }
.hd { bottom: 5rem; right: var(--borda); text-align: right; }
.hero-pe {
  position: absolute;
  bottom: 1.6rem;
  left: var(--borda);
  right: var(--borda);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--papel-3);
  z-index: 55;
}
.hp-rolar { display: inline-flex; align-items: center; gap: 0.7rem; }
.hp-rolar i { display: block; width: 46px; height: 1px; background: var(--fio); position: relative; overflow: hidden; }
.hp-rolar i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--areia);
  transform: translateX(-100%);
  animation: rola 2.4s var(--curva) infinite;
}
@keyframes rola {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.hp-cta {
  color: var(--areia);
  border-bottom: 1px solid var(--fio-ouro);
  padding-bottom: 0.3em;
  transition: color 0.3s, border-color 0.3s;
  pointer-events: auto;
}
.hp-cta:hover { color: var(--papel); border-color: var(--papel); }

/* ═══ 02 · posicionamento ═══ */
.posicao {
  min-height: 88svh;
  display: grid;
  place-items: center;
  padding: 8rem var(--borda);
  background:
    radial-gradient(60% 50% at 22% 50%, rgba(34, 63, 95, 0.35), transparent 65%),
    var(--tinta);
}
.pos-frase {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1.22;
  text-align: center;
  max-width: 18ch;
  color: var(--papel);
}
.pos-frase .pw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.pos-frase .pwi { display: inline-block; }

/* ═══ 03 · atuação ═══ */
.atuacao { padding: clamp(6rem, 12vh, 10rem) var(--borda); position: relative; }
.atu-alto { max-width: 60%; margin-bottom: clamp(3rem, 6vw, 5rem); }
.atu-titulo {
  margin-top: 1.2rem;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.atu-titulo em { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--areia); }
.atu-lista { max-width: 62%; border-top: 1px solid var(--fio); }
.area {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.9rem, 1.8vw, 1.4rem) 0.2rem;
  border-bottom: 1px solid var(--fio-suave);
  cursor: default;
  transition: padding-left 0.45s var(--curva), border-color 0.45s;
}
.area:hover { padding-left: 1.2rem; border-bottom-color: var(--fio-ouro); }
.area i {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ouro);
}
.area b {
  font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--papel-2);
  transition: color 0.35s;
}
.area:hover b { color: var(--papel); }
.area span {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papel-3);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s, transform 0.4s var(--curva);
}
.area:hover span { opacity: 1; transform: none; }

/* ═══ 04 · pilares ═══ */
.pilares {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 6rem var(--borda);
  overflow: clip;
}
.pilares-nota {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--papel-3);
  position: relative;
  z-index: 55;
}

/* ═══ 05 · tales ═══ */
.tales {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(6rem, 12vh, 10rem) var(--borda);
}
.tales-texto { position: relative; z-index: 35; max-width: 34rem; }
.tales-nome {
  margin: 1.4rem 0 0.4rem;
  font-weight: 800;
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.tales-cargo {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 2rem;
}
.tales-destaque {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--papel);
  border-left: 1px solid var(--fio-ouro);
  padding-left: 1.4rem;
  margin-bottom: 2rem;
}
.tales-par { font-size: 0.95rem; color: var(--papel-2); max-width: 52ch; margin-bottom: 1.2rem; font-weight: 300; line-height: 1.85; }
.tales-foto {
  position: relative;
  z-index: 60;
  order: 2;
  height: clamp(420px, 82vh, 780px);
  overflow: hidden;
}
.tales-foto img {
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1);
  will-change: transform, filter;
}

/* ═══ 06 · escritório ═══ */
.escritorio {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(6rem, 12vh, 9rem) var(--borda);
  background:
    radial-gradient(70% 60% at 80% 30%, rgba(34, 63, 95, 0.3), transparent 60%),
    var(--tinta);
}
.esc-titulo {
  margin: 1.2rem 0 1.8rem;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.08;
  text-transform: uppercase;
}
.esc-titulo em { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; color: var(--areia); }
.esc-par { font-size: 0.96rem; font-weight: 300; color: var(--papel-2); max-width: 50ch; margin-bottom: 1.1rem; line-height: 1.85; }
.esc-par b { font-weight: 600; color: var(--papel); }
.esc-foto { position: relative; max-width: 380px; justify-self: end; }
.esc-foto img { width: 100%; aspect-ratio: 0.8; object-fit: cover; object-position: top; }
.esc-foto figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--fio);
  margin-top: 0.9rem;
}
.esc-foto b { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3em; }
.esc-foto span { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--papel-3); }

/* ═══ 07 · manifesto ═══ */
.manifesto {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.6rem;
  padding: 7rem var(--borda);
  background:
    radial-gradient(80% 80% at 50% 110%, rgba(34, 63, 95, 0.45), transparent 60%),
    var(--tinta);
  overflow: clip;
}
.man-bloco { display: flex; flex-direction: column; }
.man-linha {
  display: block;
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 8.4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.man-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  color: var(--areia);
}
.man-fecho {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--papel-2);
  max-width: 44ch;
}
.man-fecho em { font-family: var(--serif); font-style: italic; font-size: 1.25em; }

/* ═══ 08 · triagem ═══ */
.triagem {
  position: sticky;
  top: 0;
  z-index: 45; /* cena acima do aparelho: o painel real emerge NA FRENTE */
  height: 100svh;
  padding: 5.4rem var(--borda) 1.5rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(1.2rem, 2.6vh, 2.2rem);
  overflow: clip;
}
.tri-alto { text-align: center; }
.tri-titulo {
  margin-top: 1.2rem;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1.16;
  text-transform: uppercase;
}
.tri-titulo em { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; color: var(--areia); }
.tri-painel {
  position: relative;
  z-index: 50;
  width: min(680px, 100%);
  max-height: min(74svh, 700px);
  overflow-y: auto;
  background: rgba(17, 28, 45, 0.78);
  border: 1px solid var(--fio);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tri-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.tri-topo b { color: var(--areia); }
.tri-topo span { color: var(--papel-3); }
.tri-trilha { height: 1px; background: var(--fio-suave); margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); overflow: hidden; }
.tri-trilha i {
  display: block;
  height: 100%;
  width: 11%;
  background: var(--areia);
  transition: width 0.6s var(--curva);
}
.tri-etapa { display: none; }
.tri-etapa.on { display: block; animation: etapa 0.5s var(--curva); }
@keyframes etapa { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; } }
.tri-pergunta {
  display: block;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  margin-bottom: 1.4rem;
}
.tri-campo {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fio);
  color: var(--papel);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 300;
  padding: 0.7em 0.1em;
  transition: border-color 0.3s;
}
.tri-campo:focus { outline: none; border-color: var(--areia); }
.tri-campo::placeholder { color: var(--papel-3); }
.tri-campo.area { border: 1px solid var(--fio); padding: 0.9em; resize: vertical; min-height: 110px; }
.tri-opcoes { display: grid; gap: 0.55rem; }
.tri-opcoes.duas { grid-template-columns: 1fr 1fr; }
.tri-opcao {
  text-align: left;
  font-size: 0.86rem;
  font-weight: 500;
  border: 1px solid var(--fio);
  padding: 0.9em 1.1em;
  color: var(--papel-2);
  transition: border-color 0.3s, color 0.3s, background-color 0.3s, transform 0.3s var(--curva);
}
.tri-opcao:hover { border-color: var(--fio-ouro); color: var(--papel); transform: translateX(4px); }
.tri-opcao.marcada {
  border-color: var(--areia);
  color: var(--papel);
  background: rgba(187, 155, 97, 0.1);
}
.tri-data { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.tri-sub { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--papel-3); }
.tri-avancar-data {
  justify-self: start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--areia);
  border-bottom: 1px solid var(--fio-ouro);
  padding-bottom: 0.3em;
}
.tri-final-nota { font-size: 0.92rem; font-weight: 300; color: var(--papel-2); margin-bottom: 1.6rem; max-width: 46ch; }
.tri-enviar {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--tinta);
  background: linear-gradient(115deg, var(--areia), var(--ouro));
  padding: 1.1em 1.9em;
  border-radius: 99px;
  margin-bottom: 1.2rem;
  transition: transform 0.35s var(--curva), box-shadow 0.35s;
}
.tri-enviar:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -16px rgba(220, 190, 135, 0.45); }
.tri-enviar .em-ponto { background: var(--tinta); animation: none; }
.tri-refazer {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--papel-3);
  transition: color 0.3s;
}
.tri-refazer:hover { color: var(--areia); }
.tri-erro { color: #d99a6c; font-size: 0.82rem; margin-top: 1rem; }
.tri-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--fio-suave);
}
.tri-voltar, .tri-avancar {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: color 0.3s, opacity 0.3s;
}
.tri-voltar { color: var(--papel-3); }
.tri-voltar:disabled { opacity: 0.3; cursor: not-allowed; }
.tri-voltar:not(:disabled):hover { color: var(--papel); }
.tri-avancar { color: var(--areia); border-bottom: 1px solid var(--fio-ouro); padding-bottom: 0.3em; }
.tri-avancar:hover { color: var(--papel); border-color: var(--papel); }
.tri-painel.lacrado .tri-base { display: none; }

/* ═══ 09 · outras frentes ═══ */
.frentes { padding: clamp(4rem, 8vh, 7rem) var(--borda); }
.frentes-lista { margin-top: 1.6rem; border-top: 1px solid var(--fio); max-width: 760px; }
.frentes-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0.2rem;
  border-bottom: 1px solid var(--fio-suave);
}
.frentes-lista b {
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.frentes-lista span {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--papel-3);
  text-align: right;
  letter-spacing: 0.06em;
}

/* ═══ 10 · PRESENÇA LOCAL ═══ */
.presenca-local {
  position: relative;
  padding: clamp(5rem, 10vh, 8rem) var(--borda);
  background:
    radial-gradient(75% 120% at 100% 0%, rgba(34, 63, 95, .36), transparent 60%),
    #0c1727;
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}
.local-cab {
  max-width: 920px;
}
.local-cab h2 {
  margin-top: 1rem;
  color: var(--papel);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.5rem, 5.8vw, 5.8rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.035em;
}
.local-cab > p {
  margin-top: 1.5rem;
  max-width: 68ch;
  color: var(--papel-3);
  font-size: clamp(.95rem, 1.25vw, 1.12rem);
  line-height: 1.9;
}
.local-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.8rem, 6vw, 5.5rem);
  background: var(--fio);
  border: 1px solid var(--fio);
}
.local-card {
  min-height: 330px;
  padding: clamp(1.8rem, 3.2vw, 3.2rem);
  background: rgba(12, 23, 39, .96);
}
.local-card > span {
  color: var(--ouro);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
}
.local-card h3 {
  margin-top: 1.2rem;
  color: var(--papel);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
}
.local-card p,
.local-card address {
  margin-top: 1.4rem;
  color: var(--papel-3);
  font-size: .92rem;
  font-style: normal;
  line-height: 1.8;
}
.local-card a {
  display: inline-block;
  margin-top: 1.8rem;
  color: var(--areia);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}
.local-card a:hover,
.local-card a:focus-visible {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: .35em;
}
.local-endereco {
  background:
    linear-gradient(rgba(18, 33, 53, .86), rgba(18, 33, 53, .86)),
    url("fotos/casal-frente-web.jpg") center 30% / cover;
}
@media (max-width: 860px) {
  .local-grade {
    grid-template-columns: 1fr;
  }
  .local-card {
    min-height: 0;
  }
}

/* ═══ 11 · FAQ ═══ */
.faq { padding: clamp(4rem, 8vh, 7rem) var(--borda) clamp(6rem, 10vh, 9rem); }
.faq-titulo {
  max-width: 18ch;
  margin-top: 1.1rem;
  font-size: clamp(2rem, 4.8vw, 4.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-transform: uppercase;
}
.faq-lista { margin-top: 1.6rem; max-width: 760px; border-top: 1px solid var(--fio); }
.faq-grupo {
  padding: 2.2rem 0.2rem 0.8rem;
  color: var(--ouro);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.6;
  text-transform: uppercase;
}
.faq-item { border-bottom: 1px solid var(--fio-suave); }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0.2rem;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  cursor: pointer;
  color: var(--papel-2);
  transition: color 0.3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: var(--papel); }
.faq-item summary i {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
}
.faq-item summary i::before, .faq-item summary i::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1px;
  background: var(--ouro);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--curva);
}
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item p {
  padding: 0 0.2rem 1.3rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--papel-3);
  max-width: 60ch;
  line-height: 1.8;
}
.faq-item p a {
  color: var(--areia);
  text-decoration-color: var(--fio-ouro);
  text-underline-offset: 0.25em;
}
.faq-item p a:hover,
.faq-item p a:focus-visible {
  color: var(--papel);
}
.faq-mais {
  margin: 1rem 0 2.4rem;
}
.faq-mais a {
  display: inline-block;
  color: var(--ouro);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.faq-mais a:hover,
.faq-mais a:focus-visible {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: .35em;
}

/* ═══ 11 · fechamento ═══ */
.fecho {
  position: relative;
  padding: clamp(7rem, 14vh, 11rem) var(--borda) 2rem;
  background:
    radial-gradient(90% 70% at 50% 115%, rgba(34, 63, 95, 0.5), transparent 65%),
    var(--tinta);
  overflow: clip;
}
/* união final: a linha de Mariane sobe até o símbolo; o aparelho de Tales retorna */
.uniao {
  position: relative;
  height: clamp(150px, 26vh, 240px);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  pointer-events: none;
}
.uniao-linha {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.uniao-linha path {
  fill: none;
  stroke: var(--areia);
  stroke-width: 1.6;
  opacity: 0.9;
  filter: drop-shadow(0 0 12px rgba(220, 190, 135, 0.35));
}
.uniao-simbolo {
  position: absolute;
  right: clamp(4%, 12vw, 18%);
  top: 0;
  width: clamp(64px, 7vw, 96px);
  opacity: 0;
}
.fecho-titulo { display: flex; flex-direction: column; margin-bottom: 2.4rem; }
.fecho-titulo .man-linha { font-size: clamp(2.4rem, 8vw, 7.6rem); }
.fecho-titulo .destaque { color: var(--areia); }
.fecho-duplo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  gap: 1.5rem clamp(2.5rem, 6vw, 6rem);
  margin-bottom: 2.4rem;
}
.fecho-duplo p {
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--papel-2);
  border-left: 1px solid var(--fio-ouro);
  padding-left: 1.3rem;
}
.fecho-duplo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.25em;
  color: var(--areia);
}
.fecho-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--papel-2);
  margin-bottom: 2rem;
}
.fecho-acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(4rem, 9vh, 7rem); }
.fecho-cta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--tinta);
  background: linear-gradient(115deg, var(--areia), var(--ouro));
  padding: 1.15em 2em;
  border-radius: 99px;
  transition: transform 0.35s var(--curva), box-shadow 0.35s, color 0.3s, border-color 0.3s;
}
.fecho-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -16px rgba(220, 190, 135, 0.4); }
.fecho-cta.fio { background: none; color: var(--papel-2); border: 1px solid var(--fio); }
.fecho-cta.fio:hover { color: var(--papel); border-color: var(--papel-2); box-shadow: none; }
.creditos { border-top: 1px solid var(--fio); padding-top: 2.2rem; }
.cred-logo { height: 44px; width: auto; opacity: 0.9; margin-bottom: 2rem; }
.cred-colunas {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 1.5rem 3rem;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--papel-3);
  line-height: 2;
  margin-bottom: 2.2rem;
}
.cred-colunas a { color: var(--areia); }
.cred-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  border-top: 1px solid var(--fio-suave);
  padding-top: 1.3rem;
  font-size: 0.68rem;
  color: var(--papel-3);
}
.cred-base button {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--papel-3);
  transition: color 0.3s;
}
.cred-base button:hover { color: var(--areia); }

/* ═══════════════════════════════════════════════════════════════════
   JORNADAS HORIZONTAIS — cenas presas que viajam para o lado.
   Sticky (sem pin transform) preserva as camadas fixas do aparelho.
   ═══════════════════════════════════════════════════════════════════ */
.h-secao { position: relative; } /* altura calculada via JS: trilho - viewport + tela */
.h-palco {
  position: relative; /* fixado via GSAP pin (sem dependência de camadas frontais aqui) */
  height: 100svh;
  overflow: clip;
  background:
    radial-gradient(80% 70% at 20% 20%, rgba(34, 63, 95, 0.35), transparent 60%),
    var(--marinho);
}
.h-trilho {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.quadro {
  position: relative;
  height: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem clamp(3rem, 6vw, 7rem) 4.5rem;
}
.q-indice {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 2rem;
}
.q-frase { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.q-frase.alinhada-direita { align-items: flex-end; text-align: right; }
.qf-s { font-size: clamp(0.9rem, 1.4vw, 1.25rem); font-weight: 600; letter-spacing: 0.24em; color: var(--papel-3); }
.qf-m { font-size: clamp(1.5rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.05; color: var(--papel-2); letter-spacing: -0.005em; }
.qf-g { font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; }
.qf-gg { font-size: clamp(2.7rem, 5.6vw, 5.4rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.012em; }
.qf-xx { font-size: clamp(3.2rem, 7.2vw, 7.2rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.015em; }

/* quadros da PRESENÇA */
.q-abre { width: 100vw; }
.q-retrato { width: 90vw; flex-direction: row; align-items: center; gap: clamp(2.5rem, 5vw, 6rem); }
.q-monumento { width: 106vw; justify-content: center; }
.q-lista { width: 98vw; flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; }
.q-calma { width: 88vw; flex-direction: row; align-items: center; gap: clamp(2.5rem, 5vw, 6rem); }
.q-final-h { width: 100vw; align-items: center; text-align: center; }

.q-foto { position: relative; overflow: hidden; flex: none; }
.q-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; will-change: transform; }
.f-alta { width: min(34vw, 560px); height: 76svh; }
.f-larga {
  position: absolute;
  left: 6vw; top: 50%;
  transform: translateY(-50%);
  width: 60vw; height: 82svh;
  z-index: 0;
}
.q-monumento .q-mon {
  position: relative;
  z-index: 2;
  margin-left: 42vw;
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
}
.f-lado { width: min(30vw, 480px); height: 64svh; }
.f-quieta { width: min(24vw, 400px); height: 52svh; }
.q-legenda {
  font-size: clamp(0.82rem, 1.15vw, 1.02rem);
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 2.1;
  color: var(--papel-2);
}
.q-final {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.8vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
}
.q-final em, .qt-frase em, .qa-titulo em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--areia);
}
img[data-pb] { filter: grayscale(1); }

/* grifos editoriais — a marcação cresce com o scroll (var --g via GSAP) */
.grifo { position: relative; display: inline-block; }
.grifo i { position: relative; z-index: 1; }
.grifo-faixa::before {
  content: "";
  position: absolute;
  inset: 6% -3% 2% -3%;
  background: linear-gradient(100deg, var(--ouro), var(--areia));
  opacity: 0.95;
  transform: scaleX(var(--g, 0));
  transform-origin: left center;
}
.grifo-sub::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.1em;
  height: 3px;
  background: var(--areia);
  transform: scaleX(var(--g, 0)) skewY(-0.5deg);
  transform-origin: left center;
}
.grifo-inverso::before {
  content: "";
  position: absolute;
  inset: -4% -7%;
  background: var(--ouro);
  transform: scaleX(var(--g, 0));
  transform-origin: left center;
}

/* palavra persistente da atuação */
.h-defesa {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-weight: 800;
  font-size: clamp(9rem, 24vw, 24rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 238, 227, 0.1);
  background: linear-gradient(90deg, var(--ouro), var(--areia));
  background-repeat: no-repeat;
  background-size: var(--pinta, 0%) 100%;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}

/* quadros das ÁREAS — hierarquia: as frentes fortes pesam mais */
.qa { width: 52vw; justify-content: center; gap: 0.7rem; border-left: 1px solid var(--fio-suave); }
.qa > i { font-family: var(--serif); font-size: 1.05rem; color: var(--ouro); }
.qa > b {
  font-weight: 800;
  font-size: clamp(2.3rem, 4.8vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.qa:not(.qa-forte):not(.qa-abre):not(.qa-fecho) > b { color: var(--papel-2); }
.qa-forte > i { font-size: 1.35rem; }
.qa > span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--papel-3);
  margin-top: 0.5rem;
}
.qa-abre { width: 86vw; border-left: 0; }
.qa-titulo { font-weight: 800; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.06; letter-spacing: -0.005em; }
.qa-forte { width: 72vw; }
.qa-forte > b { font-size: clamp(3rem, 6.6vw, 6.2rem); }
.qa-fecho { width: 100vw; align-items: center; text-align: center; border-left: 0; }

/* ═══ universo claro de Mariane — a mesma casa, outra voz ═══ */
.h-secao.claro .h-palco {
  background:
    radial-gradient(80% 70% at 18% 16%, rgba(220, 190, 135, 0.22), transparent 60%),
    radial-gradient(70% 60% at 88% 90%, rgba(34, 63, 95, 0.1), transparent 55%),
    #efe8d8;
  color: #16233a;
}
.h-secao.claro .qf-s { color: rgba(22, 35, 58, 0.48); }
.h-secao.claro .qf-m { color: rgba(22, 35, 58, 0.76); }
.h-secao.claro .q-legenda { color: rgba(22, 35, 58, 0.68); }
.h-secao.claro .q-final em, .h-secao.claro .qa-titulo em { color: var(--ouro); }
.h-secao.claro .qa { border-left-color: rgba(22, 35, 58, 0.1); }
.h-secao.claro .qa > span { color: rgba(22, 35, 58, 0.5); }
.qf-g.esp { margin-top: 1.2rem; }

/* névoa: a palavra nasce quase apagada e revela-se com o scroll */
.grifo-nevoa i { display: inline-block; will-change: opacity, filter; }

/* palavra persistente DIREITOS (variante clara) */
.h-direitos { -webkit-text-stroke: 1px rgba(22, 35, 58, 0.12); }

/* quadros do público previdenciário — perguntas atravessando DIREITOS */
.qb { width: 62vw; justify-content: center; }
.qb > b {
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.qb-forte { width: 78vw; }
.qb-forte > b { font-size: clamp(2.4rem, 5.4vw, 5.2rem); }
/* variação de ritmo: a pergunta decisiva escurece a cena no meio do percurso claro */
.qb-escuro {
  background:
    radial-gradient(80% 70% at 50% 20%, rgba(34, 63, 95, 0.5), transparent 65%),
    var(--marinho);
  color: var(--papel);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.qb-forte em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ouro);
}
.qb-abre { width: 92vw; border-left: 0; }
.qb-fecho { width: 100vw; align-items: center; text-align: center; border-left: 0; }

/* lista editorial de benefícios */
.qbn { width: 74vw; justify-content: center; gap: clamp(0.9rem, 2.4vh, 1.6rem); border-left: 1px solid rgba(22, 35, 58, 0.1); }
.qbn i {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.9vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: rgba(22, 35, 58, 0.82);
}
.qbn i::before {
  content: "◆";
  font-size: 0.5em;
  color: var(--ouro);
  margin-right: 0.9em;
  vertical-align: 0.25em;
}

/* ═══ a jornada — timeline ascendente: do fato ao direito ═══
   o elemento estrutural de Mariane não é um objeto: é a linha que sobe */
.h-secao.jornada .h-palco {
  background:
    radial-gradient(80% 70% at 82% -4%, rgba(220, 190, 135, 0.16), transparent 55%),
    radial-gradient(120% 90% at 50% 118%, rgba(10, 17, 29, 0.55), transparent 68%),
    linear-gradient(180deg, #2b4b70 0%, #223f5f 56%, #1b3151 100%);
  color: var(--papel);
}
.jo-linha {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;  /* nunca por atributo: largura própria inflaria o trilho e realimentaria o ajuste de altura */
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.jo-linha path {
  fill: none;
  stroke: var(--areia);
  stroke-width: 1.6;
  opacity: 0.9;
  filter: drop-shadow(0 0 14px rgba(220, 190, 135, 0.35));
}
.jo-cometa {
  fill: var(--areia);
  filter: drop-shadow(0 0 12px rgba(220, 190, 135, 0.9)) drop-shadow(0 0 30px rgba(220, 190, 135, 0.5));
  transition: opacity 0.3s;
}
.jo-abre { width: 84vw; }
.jo-frase {
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
.jo-frase em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--areia);
}
.jo-sub {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  color: var(--papel-2);
  max-width: 42ch;
}
.jo-etapa {
  width: 40vw;
  justify-content: flex-end;
  padding-bottom: calc(10svh + var(--alt, 0) * 11svh);
}
.jo-bloco { position: relative; z-index: 2; max-width: 30rem; }
.jo-marco {
  position: absolute;
  left: 3px;
  top: -3.6rem;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: var(--areia);
  box-shadow: 0 0 0 7px rgba(220, 190, 135, 0.13), 0 0 22px rgba(220, 190, 135, 0.45);
}
.jo-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ouro);
  margin-bottom: 0.5rem;
}
.jo-titulo {
  font-weight: 800;
  /* progressão real: cada estágio é maior que o anterior */
  font-size: calc(clamp(1.9rem, 3.9vw, 3.6rem) * (1 + var(--alt, 0) * 0.11));
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* número fantasma monumental atrás de cada estágio */
.jo-etapa::before {
  content: attr(data-num);
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: calc(6svh + var(--alt, 0) * 11svh);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(9rem, 20vw, 19rem);
  line-height: 0.8;
  color: rgba(243, 238, 227, 0.045);
  pointer-events: none;
}
.jo-fala {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--papel-2);
  max-width: 34ch;
}
.jo-final .jo-titulo { color: var(--areia); }
.jo-retrato { width: 40vw; justify-content: flex-end; padding-bottom: 16svh; z-index: 0; }
.f-jo { width: min(24vw, 400px); height: 54svh; }
.jo-fecho { width: 96vw; align-items: center; text-align: center; }

/* ═══ o tempo — o aparelho deita e vira cronômetro (conversão criminal) ═══ */
.ato-tempo { height: 230vh; position: relative; }
.tempo-palco {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(4.5rem, 9vh, 7rem) var(--borda) clamp(2.5rem, 6vh, 4.5rem);
  background:
    radial-gradient(70% 55% at 50% 52%, rgba(34, 63, 95, 0.30), transparent 70%),
    var(--tinta);
}
.tempo-frase { text-align: center; z-index: 46; }
.tempo-frase .tf-linha {
  display: block;
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--papel);
}
.tempo-frase em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--areia);
}
.tempo-nota {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  color: var(--papel-2);
  text-align: center;
  z-index: 46;
  margin-top: -8vh;
}
.tempo-cta { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; z-index: 46; }
.tempo-chamar {
  display: inline-block;
  padding: 1.05rem 2.4rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--ouro), var(--areia));
  color: #16233a;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-decoration: none;
  box-shadow: 0 12px 40px rgba(187, 155, 97, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tempo-chamar:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(187, 155, 97, 0.5); }
.tempo-micro { font-size: 0.6rem; letter-spacing: 0.4em; color: var(--papel-3); text-transform: uppercase; }

/* a tela-cronômetro: o aparelho está deitado, o conteúdo fica em pé */
.e-tempo { align-items: center; justify-content: center; }
.tempo-giro {
  transform: rotate(90deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}
.tempo-rotulo { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.34em; color: rgba(19, 35, 60, 0.55); }
.tempo-cron {
  font-weight: 300;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  letter-spacing: 0.06em;
  color: #13233c;
  font-variant-numeric: tabular-nums;
}
.tempo-sub { font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: rgba(19, 35, 60, 0.65); }
.tempo-botao { margin-top: 0.4rem; }

/* grifo que SOBE: linha fina dourada com ponta de seta apontando para cima */
.serifado i { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; }
/* fala ao lado de foto em cena clara: serif sobre faixa dourada, tudo legível */
.ouro-claro i { color: #9a7a45; }
.fala-clara { gap: 0.35em; }
.h-secao.claro .fala-clara .qf-s { letter-spacing: 0.34em; color: rgba(22, 35, 58, 0.85); }
.fala-clara .serifado.grifo-faixa i { color: #16233a; padding-inline: 0.14em; }

/* composição de revista: a fala invade a foto; sobre a imagem = branca,
   fora dela = a cor do fundo manda (azul na clara, papel na escura) */
.q-retrato.sobreposto { position: relative; }
.fala-sobre { position: relative; z-index: 2; margin-left: clamp(-18rem, -15vw, -6rem); }
.fala-sobre .na-foto { color: var(--papel) !important; text-shadow: 0 2px 26px rgba(10, 17, 29, 0.55); }
.fala-sobre .escada { margin-left: clamp(7rem, 14vw, 20rem); }
.fala-sobre .serifado.grifo-faixa i { text-shadow: none; }
@media (max-width: 900px) {
  .fala-sobre { margin-left: 0; }
  .fala-sobre .escada { margin-left: 2rem; }
}
.grifo-sobe { position: relative; padding-left: 0.5em; }
.grifo-sobe::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.06em;
  width: 2px;
  height: 112%;
  background: linear-gradient(0deg, var(--ouro), var(--areia));
  transform: scaleY(var(--g, 0));
  transform-origin: bottom;
}
.grifo-sobe::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -0.2em;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--areia);
  border-top: 2px solid var(--areia);
  transform: rotate(45deg) scale(var(--g, 0));
  transform-origin: center;
}

/* quadros PORTELA CUNHA — o casal e as duas atuações */
.qt-casal .q-mon em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--areia);
}
.qi-solto { display: block; margin-bottom: 1.4rem; }
.qt-eixo {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  color: var(--papel-2);
  max-width: 30ch;
}
.qt-perfil {
  display: inline-block;
  margin-top: 1.35rem;
  color: var(--ouro);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.6;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease, transform 0.25s ease;
}
.qt-perfil:hover,
.qt-perfil:focus-visible {
  color: var(--papel);
  transform: translateX(0.35rem);
}
.qt-retrato { width: 94vw; flex-direction: row; align-items: center; gap: clamp(2.5rem, 5vw, 6rem); }
.qt-nome {
  font-weight: 800;
  font-size: clamp(3rem, 5.8vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 1.1rem 0 0.7rem;
}
.qt-cargo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ouro);
}
.qt-frag { width: 74vw; justify-content: center; }
.qt-frag.com-foto { width: 90vw; flex-direction: row; align-items: center; gap: clamp(2.5rem, 5vw, 6rem); }
.qt-frase { font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 4.1rem); line-height: 1.1; letter-spacing: -0.008em; }
.qt-frase.menor { font-size: clamp(1.6rem, 3.2vw, 2.9rem); }
.qt-fecho { width: 100vw; align-items: center; text-align: center; gap: 2.2rem; }
.qt-nota {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--papel-3);
  line-height: 2.3;
  max-width: 72ch;
}

/* sem JS: as jornadas horizontais viram leitura vertical */
html:not(.js) .h-palco { position: relative; height: auto; }
html:not(.js) .h-trilho { flex-direction: column; width: auto; height: auto; }
html:not(.js) .quadro { width: 100% !important; height: auto; min-height: 60svh; }
html:not(.js) .h-defesa { display: none; }
html:not(.js) .grifo { --g: 1; }
html:not(.js) img[data-pb] { filter: none; }
html:not(.js) .f-larga { position: relative; left: 0; top: 0; transform: none; }
html:not(.js) .q-monumento .q-mon { margin-left: 0; }
html:not(.js) .ato-travessia, html:not(.js) .ato-missao { height: auto; }
html:not(.js) .travessia, html:not(.js) .missao { position: relative; height: auto; min-height: 100svh; }
html:not(.js) .travessia { background: #efe8d8; }
html:not(.js) .travessia .tv-l { color: #16233a; }
html:not(.js) .trav-id { opacity: 1; }
html:not(.js) .missao { display: flex; flex-direction: column; gap: 4rem; padding-block: 7rem; }
html:not(.js) .mi-parede, html:not(.js) .mi-fase { opacity: 1; }
html:not(.js) .mi-parede i { opacity: 1; }
html:not(.js) .mi-luz { display: none; }
html:not(.js) .grifo-nevoa i { opacity: 1; filter: none; }
html:not(.js) .jo-linha { display: none; }
html:not(.js) .jo-etapa { padding-bottom: 0; justify-content: center; }
html:not(.js) .trav-rastro { display: none; }
html:not(.js) .ato-aux { height: auto; }
html:not(.js) .ato-tempo { height: auto; }
html:not(.js) .tempo-palco { position: static; height: auto; gap: 3rem; }
html:not(.js) .aux-cena { position: relative; height: auto; display: flex; flex-direction: column; gap: 4rem; padding-block: 7rem; }
html:not(.js) .ax-fase { opacity: 1; }
html:not(.js) .ax-indice { position: static; }
html:not(.js) .uniao { display: none; }

/* ═══ responsivo ═══ */
@media (max-width: 1100px) {
  .atu-alto, .atu-lista { max-width: 100%; }
}
@media (max-width: 900px) {
  .tel { width: clamp(150px, 34vw, 210px); }
  .ato-hero { height: 230vh; }
  .ato-pilares { height: 210vh; }
  .ato-triagem { height: 200vh; }
  .ato-travessia { height: 220vh; }
  .ato-missao { height: 300vh; }
  .tv-l { font-size: clamp(2rem, 9.4vw, 4rem); }
  .trav-marca { width: min(280px, 70vw); }
  .mi-bloco span { font-size: clamp(1.8rem, 8.6vw, 3.4rem); }
  .mi-parede i { font-size: clamp(1.05rem, 5vw, 2rem); white-space: normal; text-align: center; }
  .mi-parede i:first-child { font-size: clamp(1.4rem, 6.6vw, 2.6rem); }
  .mi-luz { width: 34vw; }
  .aux-tempo { grid-template-columns: 1fr; }
  .aux-tempo-n { grid-column: 1; }
  .aux-lei { flex-direction: column; gap: 1rem; }
  .qb, .qb-forte, .qbn, .qb-abre { width: 100vw; }
  .qbn i { white-space: normal; }
  .fecho-duplo { grid-template-columns: 1fr; }
  .jo-abre { width: 100vw; }
  .jo-etapa { width: 78vw; padding-bottom: calc(8svh + var(--alt, 0) * 7svh); }
  .jo-retrato { width: 70vw; padding-bottom: 12svh; }
  .f-jo { width: 56vw; height: 40svh; }
  .jo-marco { top: -2.6rem; }
  .jo-etapa::before { font-size: clamp(6rem, 26vw, 10rem); bottom: calc(4svh + var(--alt, 0) * 7svh); }
  .ato-aux { height: 260vh; }
  .ax-pergunta { font-size: clamp(1.9rem, 8.4vw, 3.4rem); }
  .qt-eixo { margin-top: 1rem; }
  .uniao { height: 120px; }
  .uniao-simbolo { right: 6%; width: 56px; }

  /* jornadas horizontais no celular: quadros mais largos, composições em coluna */
  .quadro { padding: 5rem clamp(1.4rem, 5vw, 2.5rem) 3.5rem; }
  .q-retrato, .q-calma, .qt-retrato, .qt-frag.com-foto, .q-lista { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem; width: 100vw; }
  .q-abre, .q-monumento, .q-final-h, .qt-frag, .qa-abre, .qa-fecho, .qt-fecho { width: 100vw; }
  .qa, .qa-forte { width: 92vw; }
  .f-alta { width: 72vw; height: 46svh; }
  .f-larga { position: relative; left: 0; top: 0; transform: none; width: 88vw; height: 44svh; }
  .q-monumento .q-mon { margin-left: 4vw; margin-top: -12svh; }
  .f-lado, .f-quieta { width: 64vw; height: 38svh; }
  .q-frase.alinhada-direita { align-items: flex-start; text-align: left; }
  .h-defesa { font-size: clamp(6rem, 30vw, 10rem); }
  .tales { grid-template-columns: 1fr; padding-top: 0; gap: 2.4rem; }
  .tales-foto { order: 0; height: 62vh; margin: 0 calc(var(--borda) * -1); }
  .tales-texto { max-width: 100%; }
  .escritorio { grid-template-columns: 1fr; }
  .esc-foto { justify-self: start; }
  .mon-linha { font-size: clamp(2.5rem, 13.5vw, 6rem); }
  .monumento.menor .mon-linha, .ff-pilares .mon-linha { font-size: clamp(2.2rem, 12vw, 5rem); }
  .hb, .hd { display: none; }
  .tri-opcoes.duas { grid-template-columns: 1fr; }
  .area { grid-template-columns: 2.4rem 1fr; }
  .area span { display: none; }
  .cred-colunas { grid-template-columns: 1fr; }
  .em-rotulo { font-size: 0.56rem; }
  .man-linha { font-size: clamp(2.2rem, 11vw, 5rem); }
  .fecho-titulo .man-linha { font-size: clamp(2rem, 10vw, 4.6rem); }
}
@media (max-width: 640px) {
  .nav-marca { font-size: 0.58rem; letter-spacing: 0.22em; }
  .emergencia { right: 50%; transform: translateX(50%); bottom: 0.9rem; }
  .emergencia:hover { transform: translateX(50%) translateY(-2px); }
  .pos-frase { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .fecho-acoes .fecho-cta { width: 100%; text-align: center; }
}

/* ═══ acessibilidade / sem movimento ═══ */
@media (prefers-reduced-motion: reduce) {
  html:not(.forca-movimento) *, html:not(.forca-movimento) *::before, html:not(.forca-movimento) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js:not(.forca-movimento) .surgir { opacity: 1 !important; transform: none !important; }
  html:not(.forca-movimento) .tel-camada { display: none; }
  html:not(.forca-movimento) .frente-fixa { display: none; }
  html:not(.forca-movimento) .tales-foto img { filter: none; }
  html:not(.forca-movimento) .tt-estado { opacity: 1; }
  html:not(.forca-movimento) .ato-hero,
  html:not(.forca-movimento) .ato-pilares,
  html:not(.forca-movimento) .ato-triagem,
  html:not(.forca-movimento) .ato-travessia,
  html:not(.forca-movimento) .ato-missao { height: auto; }
  html:not(.forca-movimento) .hero,
  html:not(.forca-movimento) .pilares,
  html:not(.forca-movimento) .triagem,
  html:not(.forca-movimento) .travessia,
  html:not(.forca-movimento) .missao { position: relative; height: auto; min-height: 100svh; }
  html:not(.forca-movimento) .travessia { background: #efe8d8; }
  html:not(.forca-movimento) .travessia .tv-l { color: #16233a; }
  html:not(.forca-movimento) .trav-id { opacity: 1; }
  html:not(.forca-movimento) .missao { display: flex; flex-direction: column; gap: 4rem; padding-block: 7rem; }
  html:not(.forca-movimento) .mi-fase, html:not(.forca-movimento) .mi-parede { opacity: 1; }
  html:not(.forca-movimento) .mi-parede i { opacity: 1; }
  html:not(.forca-movimento) .mi-luz { display: none; }
  html:not(.forca-movimento) .grifo-nevoa i { opacity: 1; filter: none; }
  html:not(.forca-movimento) .jo-linha { display: none; }
  html:not(.forca-movimento) .jo-etapa { padding-bottom: 0; justify-content: center; }
  html:not(.forca-movimento) .trav-rastro { display: none; }
  html:not(.forca-movimento) .ato-aux { height: auto; }
  html:not(.forca-movimento) .ato-tempo { height: auto; }
  html:not(.forca-movimento) .tempo-palco { position: static; height: auto; gap: 3rem; }
  html:not(.forca-movimento) .aux-cena { position: relative; height: auto; display: flex; flex-direction: column; gap: 4rem; padding-block: 7rem; }
  html:not(.forca-movimento) .ax-fase { opacity: 1; }
  html:not(.forca-movimento) .ax-indice { position: static; }
  html:not(.forca-movimento) .uniao { display: none; }
  /* horizontais viram leitura vertical acessível */
  html:not(.forca-movimento) .h-secao { height: auto !important; }
  html:not(.forca-movimento) .h-palco { position: relative; height: auto; }
  html:not(.forca-movimento) .h-trilho { flex-direction: column; width: auto; height: auto; transform: none !important; }
  html:not(.forca-movimento) .quadro { width: 100% !important; height: auto; min-height: 60svh; }
  html:not(.forca-movimento) .grifo { --g: 1; }
  html:not(.forca-movimento) .grifo-cor i { color: var(--areia); }
  html:not(.forca-movimento) .h-defesa { display: none; }
  html:not(.forca-movimento) img[data-pb] { filter: none; }
  html:not(.forca-movimento) .f-larga { position: relative; left: 0; top: 0; transform: none; }
  html:not(.forca-movimento) .q-monumento .q-mon { margin-left: 0; }
}