/* ===== LÚMEN · Caderno de Percepção ===== */
/* Fontes oficiais da marca */
/* TODO (pendência de negócio, não técnica): TAN Mon Cheri está em uso sem licença
   comercial regularizada. Antes de publicar em produção definitiva, comprar a
   licença comercial (~US$17) em https://creativemarket.com/tantype/5661155-TAN-MON-CHERI */
@font-face {
  font-family: "TAN Mon Cheri";
  src: url("../assets/fonts/tan-mon-cheri/TAN-MON CHERI-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway/Raleway-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway/Raleway-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway/Raleway-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway/Raleway-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/raleway/Raleway-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root{
  --black: #0B0B0B;
  --white: #FFFFFF;
  --graphite: #232529;
  --gold: #C6A96B;
  --oxblood: #721B19;

  --font-display: "TAN Mon Cheri", "Times New Roman", serif;
  --font-body: "Raleway", sans-serif;

  --ease: cubic-bezier(.22,.7,.27,1);
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ---------- estrutura de página ---------- */
.doc-page{
  min-height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:8vh 6vw;
}

.page-inner{
  max-width:760px;
  width:100%;
}

.kicker{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:2.2rem;
  text-align:center;
}
.kicker--dark{ color:var(--graphite); }

/* ---------- progresso lateral ---------- */
.progress-rail{
  position:fixed;
  right:clamp(16px, 3vw, 40px);
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  height:38vh;
  mix-blend-mode:difference;
}
.progress-mark{
  color:var(--white);
  font-size:.9rem;
}
.progress-track{
  position:relative;
  flex:1;
  width:1px;
  background:rgba(255,255,255,.22);
}
.progress-fill{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:0%;
  background:var(--gold);
  transition:height .1s linear;
}

/* ---------- CAPA ---------- */
.cover{
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(198,169,107,0.06), transparent 60%),
    var(--black);
  text-align:center;
}
.cover-frame{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3.2rem, 11vw, 8rem);
  letter-spacing:.02em;
  line-height:1.25;
  margin:.3em 0 1.6rem;
}
.cover-sub{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.85rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--white);
  opacity:.85;
  margin-bottom:.6rem;
}
.cover-tagline{
  font-family:var(--font-body);
  font-style:italic;
  font-weight:300;
  font-size:.95rem;
  color:var(--gold);
  opacity:.9;
}

.scroll-cue{
  position:absolute;
  bottom:6vh;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  color:var(--white);
  text-decoration:none;
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.75;
  transition:opacity .3s var(--ease);
}
.scroll-cue:hover{ opacity:1; }
.scroll-cue .arrow{
  font-size:1rem;
  animation:float 2.4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}

/* ---------- COMO LER (página clara) ---------- */
.como-ler{
  background:var(--white);
  color:var(--graphite);
  text-align:center;
}
.serif-lg{
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.25;
  color:var(--black);
  margin-bottom:2.4rem;
}
.body-copy{
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  line-height:1.8;
  color:var(--graphite);
  max-width:620px;
  margin:0 auto 1.2rem;
}

/* ---------- MANIFESTO ---------- */
.manifesto{
  background:var(--black);
  padding:0;
}
.manifesto-panel{
  position:relative;
  height:180vh; /* espaço de "fôlego": mantém a frase parada antes da próxima */
}
.manifesto-panel--climax{
  height:140vh;
}
.manifesto-line{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 8vw;
  font-family:var(--font-body);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.6rem, 4vw, 3rem);
  line-height:1.4;
  color:rgba(255,255,255,.18);
  transition:color .6s var(--ease);
}
.manifesto-line.is-active{
  color:var(--white);
}
.manifesto-line--climax{
  background:var(--oxblood);
  color:rgba(255,255,255,.35);
  font-family:var(--font-display);
  font-style:normal;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(1.5rem, 4.2vw, 2.8rem);
}
.manifesto-line--climax.is-active{
  color:var(--white);
}

/* ---------- placeholder ---------- */
.placeholder-note{
  background:var(--graphite);
  text-align:center;
}
.serif-md{
  font-family:var(--font-body);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.1rem, 2.4vw, 1.5rem);
  line-height:1.7;
  color:rgba(255,255,255,.7);
}

/* ---------- títulos de seção (TAN Mon Cheri · sempre caixa alta) ---------- */
.title-caps{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:clamp(2rem, 5vw, 3.6rem);
  line-height:1.4;
  text-align:center;
  color:var(--white);
  margin-bottom:1.6rem;
}
.title-caps--dark{ color:var(--black); }

.page-inner--wide{ max-width:920px; }

.section-lede{
  font-family:var(--font-body);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1rem, 1.8vw, 1.2rem);
  color:rgba(255,255,255,.65);
  max-width:560px;
  text-align:center;
  margin:0 auto 3.2rem;
  line-height:1.7;
}
.section-note{
  font-family:var(--font-body);
  font-weight:300;
  font-style:italic;
  font-size:.85rem;
  color:rgba(255,255,255,.4);
  text-align:center;
  margin-top:2.4rem;
}

/* ---------- PARTE II · O QUE CONSTRUÍMOS ---------- */
.transformacoes{ background:var(--white); }
.transform-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:2.2rem;
  margin-top:2.4rem;
}
.transform-list li{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:1.6rem;
  align-items:start;
  border-top:1px solid rgba(35,37,41,.12);
  padding-top:2.2rem;
}
.transform-list li:first-child{ border-top:none; padding-top:0; }
.transform-n{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--gold);
  line-height:1;
}
.transform-list h3{
  font-family:var(--font-body);
  font-weight:600;
  font-size:1.15rem;
  color:var(--black);
  margin-bottom:.5rem;
}
.transform-list p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  color:var(--graphite);
  max-width:560px;
}

/* ---------- PARTE III · PROJETOS ---------- */
.projetos{ background:var(--black); }
.text-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(198,169,107,.5);
  padding-bottom:.35rem;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.text-link:hover{ opacity:.75; border-color:var(--gold); }

/* ---------- PARTE IV · NÃO FAZEMOS MAIS DO MESMO ---------- */
.nao-fazemos{ background:var(--graphite); }
.negation-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:2.6rem;
}
.negation-list li{
  font-family:var(--font-body);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.2rem, 2.6vw, 1.7rem);
  line-height:1.5;
  color:var(--white);
  text-align:center;
}

/* ---------- PARTE V · METODOLOGIA ---------- */
.metodologia{ background:var(--white); }
.method-chain{
  list-style:none;
  counter-reset:step;
  position:relative;
  padding-left:3.4rem;
}
.method-chain li{
  position:relative;
  padding-bottom:2.4rem;
}
.method-chain li:last-child{ padding-bottom:0; }
.method-chain li::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  position:absolute;
  left:-3.4rem;
  top:0;
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--gold);
  width:1.2rem;
  text-align:right;
}
.method-chain h3{
  font-family:var(--font-body);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.95rem;
  color:var(--black);
  margin-bottom:.4rem;
}
.method-chain p{
  font-family:var(--font-body);
  font-weight:300;
  font-size:1rem;
  color:var(--graphite);
  max-width:480px;
}

/* ---------- PARTE VI · QUEM ATENDEMOS ---------- */
.publico{ background:var(--black); }
.publico-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
}
.publico-list li{
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1.2rem, 2.8vw, 1.8rem);
  color:var(--white);
  text-align:center;
}

/* ---------- PARTE VII · MENTORIA ---------- */
.mentoria{ background:var(--white); }
.body-copy--dark{ color:var(--graphite); text-align:center; }

/* ---------- ENCERRAMENTO ---------- */
.encerramento{ background:var(--black); text-align:center; }
.closing-line{
  font-family:var(--font-body);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.8rem, 4.2vw, 3rem);
  color:var(--white);
  line-height:1.3;
  margin-bottom:2rem;
}
.body-copy--light{ color:rgba(255,255,255,.65); text-align:center; }
.closing-cta{
  display:inline-block;
  margin-top:2rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--black);
  background:var(--gold);
  padding:1rem 2.2rem;
  text-decoration:none;
  transition:opacity .3s var(--ease);
}
.closing-cta:hover{ opacity:.8; }
.signature{
  margin-top:3.2rem;
  font-family:var(--font-body);
  font-weight:400;
  font-style:italic;
  font-size:.85rem;
  color:rgba(255,255,255,.4);
}

@media (max-width: 640px){
  .progress-rail{ right:12px; height:28vh; }
  .projeto-grid{ grid-template-columns:repeat(2, 1fr); }
  .projeto-tile--wide{ grid-column:span 2; }
  .transform-list li{ grid-template-columns:44px 1fr; }
}