/* ============================================================
   SECTIONS — Tese · Pilares · Metodologia · Terminal · Liderança
   ============================================================ */

/* ============================================================
   SEÇÃO 2 — A TESE (deck de cards empilhados + distorção)
   ============================================================ */
.tese { background: var(--bg); position: relative; }
.tese__pin {
  height: 100vh; min-height: 600px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(5rem, 12vh, 8rem) clamp(1.5rem, 6vw, 6rem);
  overflow: hidden;
}
.tese__label {
  position: absolute;
  top: clamp(4rem, 9vh, 7rem); left: 50%;
  transform: translateX(-50%);
}
.tese__counter {
  position: absolute;
  bottom: clamp(3rem, 7vh, 5rem); left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.8rem;
  color: var(--muted); letter-spacing: 0.2em;
}
.tese__counter b { color: var(--accent); font-weight: 500; }

.tese__deck {
  position: relative;
  width: min(620px, 92vw);
  height: clamp(340px, 52vh, 460px);
}
.tcard {
  position: absolute; inset: 0;
  border: 1px solid var(--border);
  padding: clamp(2rem, 4vw, 3.2rem);
  display: flex; flex-direction: column; justify-content: space-between;
  will-change: transform, filter, opacity;
  overflow: hidden;
  transition:
    transform 0.7s var(--ease),
    filter    0.7s var(--ease),
    opacity   0.7s var(--ease),
    border-color 0.7s var(--ease);
  box-shadow: 0 30px 70px -35px rgba(0,0,0,0.85);
}
.tcard.is-front { border-color: var(--accent-dim); }

/* imagem de fundo */
.tcard__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) brightness(0.32) contrast(1.1);
  transform: scale(1.06);
  transition: transform 0.8s var(--ease);
}
.tcard.is-front .tcard__bg { transform: scale(1.0); }

/* overlay: escuro no topo, abre no meio, fecha na base */
.tcard::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(5,5,5,0.78) 0%,
    rgba(5,5,5,0.28) 45%,
    rgba(5,5,5,0.82) 100%
  );
}

/* conteúdo acima do overlay */
.tcard__num,
.tcard__text { position: relative; z-index: 2; }

.tcard__num {
  font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.22em; color: var(--accent);
}
.tcard__text {
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.25; color: #fff;
}
.tcard__text strong { color: var(--accent); font-weight: 600; font-style: italic; }

/* ============================================================
   SEÇÃO 3 — PILARES (card fixo à esq., texto troca à dir.)
   ============================================================ */
.setores { position: relative; background: var(--bg); }
.setores__pin {
  height: 100vh; min-height: 600px; position: relative;
  padding: clamp(6rem, 12vh, 9rem) clamp(1.5rem, 8vw, 10rem) clamp(3rem, 8vh, 6rem);
  display: flex; flex-direction: column;
}
.setores__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); flex: 0 0 auto;
}
.setores__head .tag { display: block; margin-bottom: 1rem; }
.setores__head h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1; letter-spacing: -0.02em;
}
.setores__counter {
  font-family: var(--mono); font-size: 0.85rem;
  color: var(--muted); letter-spacing: 0.18em; white-space: nowrap;
}
.setores__counter #pilarNum { color: var(--accent); font-size: 1.4rem; }

/* palco: pilares sobrepostos, só o ativo visível */
.setores__stage { position: relative; flex: 1 1 auto; }
.pilar {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: stretch;
  opacity: 0; visibility: hidden;
  transition: opacity 0.55s var(--ease), visibility 0.55s;
}
.pilar.active { opacity: 1; visibility: visible; }

/* card fixo à esquerda — imagem de fundo + texto sobreposto */
.pilar__card {
  border: 1px solid var(--border);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  transform: translateY(24px);
  transition: transform 0.6s var(--ease), border-color 0.4s var(--ease);
  min-height: 0; /* respeita o flex-parent */
}
.pilar.active .pilar__card { transform: translateY(0); border-color: var(--accent-dim); }

/* imagem de fundo com grayscale + overlay duplo */
.pilar__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) brightness(0.38) contrast(1.1);
  transform: scale(1.06);
  transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
}
.pilar__card:hover .pilar__bg {
  transform: scale(1.0);
  filter: grayscale(0.7) brightness(0.32) contrast(1.15);
}

/* gradiente: cobre o topo (escuro) e abre levemente na base */
.pilar__card::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(5,5,5,0.72) 0%,
    rgba(5,5,5,0.35) 40%,
    rgba(5,5,5,0.78) 100%
  );
}

/* todo conteúdo fica acima do overlay */
.pilar__idx,
.pilar__name { position: relative; z-index: 2; }

.pilar__idx  {
  font-family: var(--mono); font-size: 0.72rem;
  color: rgba(255,255,255,0.45); letter-spacing: 0.2em;
}
/* linha esmeralda sutil antes do nome */
.pilar__name-wrap {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.pilar__name-wrap::before {
  content: ""; display: block;
  width: 32px; height: 1px; background: var(--accent);
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.15s, width 0.5s var(--ease) 0.15s;
}
.pilar.active .pilar__name-wrap::before { opacity: 1; width: 48px; }

.pilar__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05;
  color: #fff;
}

/* texto à direita */
.pilar__text { display: flex; flex-direction: column; justify-content: center; gap: 2rem; }
.pilar__lead {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.3; color: var(--text); max-width: 26ch;
  transform: translateY(28px); opacity: 0;
  transition: transform 0.7s var(--ease) 0.08s, opacity 0.7s var(--ease) 0.08s;
}
.pilar.active .pilar__lead { transform: translateY(0); opacity: 1; }
.pilar__data {
  font-family: var(--mono); font-size: 0.82rem; color: var(--accent);
  border-top: 1px solid var(--border); padding-top: 1.4rem;
  line-height: 2; letter-spacing: 0.03em; max-width: 34ch;
  transform: translateY(28px); opacity: 0;
  transition: transform 0.7s var(--ease) 0.18s, opacity 0.7s var(--ease) 0.18s;
}
.pilar.active .pilar__data { transform: translateY(0); opacity: 1; }
.pilar__data .k { color: var(--muted); }

/* ============================================================
   EXTRA 1 — A METODOLOGIA (timeline vertical / draw SVG)
   ============================================================ */
.metodo {
  background: var(--bg);
  padding: clamp(7rem, 16vh, 12rem) clamp(1.5rem, 8vw, 10rem) clamp(6rem, 12vh, 10rem);
  border-top: 1px solid var(--border);
}
.metodo__head { max-width: 1100px; margin: 0 auto 5rem; }
.metodo__head .tag { display: block; margin-bottom: 1.4rem; }
.metodo__head h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.02em;
}

.metodo__timeline {
  position: relative; max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(5rem, 12vh, 9rem);
}
/* Spine central: linha de 1px "desenhada" via CSS custom property */
.metodo__spine {
  position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; background: var(--border); overflow: hidden;
}
.metodo__spine::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--accent);
  transform: scaleY(var(--draw, 0)); transform-origin: top;
  box-shadow: 0 0 10px rgba(5,150,105,0.65);
}

.step { position: relative; width: 50%; }
.step--left  { align-self: flex-start; text-align: right; padding-right: clamp(2rem, 4vw, 4rem); }
.step--right { align-self: flex-end;   text-align: left;  padding-left:  clamp(2rem, 4vw, 4rem); }

/* Nó no eixo central */
.step__node {
  position: absolute; top: 0.55rem; width: 9px; height: 9px;
  background: var(--bg); border: 1px solid var(--accent); border-radius: 50%;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.step--left  .step__node { right: -4.5px; }
.step--right .step__node { left:  -4.5px; }
.step.in .step__node { background: var(--accent); box-shadow: 0 0 12px rgba(5,150,105,0.8); }

.step__label {
  font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: 0.16em; color: var(--accent);
  display: block; margin-bottom: 1rem;
}
.step p {
  font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.3; color: var(--text); max-width: 40ch;
}
.step--left p { margin-left: auto; }

/* Estado inicial para fade-in lateral (JS adiciona .js-anim) */
.js-anim .step        { opacity: 0; }
.js-anim .step--left  { transform: translateX(-40px); }
.js-anim .step--right { transform: translateX( 40px); }

/* ============================================================
   SEÇÃO 4 — O TERMINAL (grid de dados + scramble no título)
   ============================================================ */
.terminal {
  background: var(--bg);
  padding: clamp(6rem, 14vh, 11rem) clamp(1.5rem, 8vw, 10rem);
  border-top: 1px solid var(--border);
}
.terminal__title {
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  letter-spacing: 0.22em; color: var(--text);
  margin-bottom: 4rem; min-height: 1.4em;
}
.terminal__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.tcell {
  background: var(--surface); padding: 2.6rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.tcell__k {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase;
}
.tcell__v {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.4rem); color: var(--text); letter-spacing: -0.01em;
}
.tcell__v.accent { color: var(--accent); }
.tcell__note { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }

/* ============================================================
   EXTRA 2 — A LIDERANÇA (reveal assimétrico: capa sobe + foto escala)
   ============================================================ */
.lideranca {
  background: var(--bg);
  padding: clamp(7rem, 16vh, 12rem) clamp(1.5rem, 8vw, 10rem);
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center; max-width: 1300px; margin: 0 auto;
}
.lideranca__text .tag { display: block; margin-bottom: 1.6rem; }
.lideranca__text h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -0.02em;
  margin-bottom: 1.8rem;
}
.lideranca__text p {
  font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.5; color: #b8b8b8; max-width: 46ch; margin-bottom: 2.4rem;
}
.diretriz {
  font-family: var(--mono); font-size: 0.82rem; line-height: 2;
  color: var(--accent); border-left: 1px solid var(--accent-dim);
  padding-left: 1.4rem; letter-spacing: 0.03em;
}
.diretriz b { font-weight: 500; letter-spacing: 0.14em; }

/* Caixa de reveal: foto coberta pela .reveal-box__cover que sobe via GSAP */
.reveal-box {
  position: relative; aspect-ratio: 4 / 5;
  overflow: hidden; border: 1px solid var(--border);
}
.reveal-box__img {
  position: absolute; inset: 0;
  background-image: url("https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?auto=format&fit=crop&w=1400&q=70");
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transform: scale(1.18); will-change: transform;
}
.reveal-box__cover {
  position: absolute; inset: 0;
  background: var(--surface); z-index: 2; will-change: transform;
}
/* Linha esmeralda na base da capa (visível enquanto o bloco desce) */
.reveal-box__cover::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: var(--accent);
}