/* ============================================================
   INPRÓS v2 — O Que Fazemos (pg-o-que-fazemos.css)
   Momento-assinatura: o TRÍPTICO. Três colunas de pé, como
   pilares; a rolagem abre uma de cada vez. A coluna aberta mostra
   o nome gigante (o peso sobe), o texto e, ao lado, a figura de
   partículas do pilar (anéis que se propagam, dupla hélice, fila
   que encurta). As fechadas guardam o nome na vertical, em contorno.
   Sem movimento (celular, movimento reduzido, sem JS): três blocos
   completos, em colunas (desktop) ou empilhados (celular).
   ============================================================ */

/* ---------- âncora "pilares" (o JS a move dentro do palco) ---------- */
.pagina [data-ancora="pilares"] {
  left: 50vw;
  width: 44vw;
  top: 20vh;
  height: 56vh;
}

/* ---------- hero ---------- */
.oqf-titulo {
  max-width: 5.6em;
}

/* ============================================================
   Tríptico — base (estático, completo)
   ============================================================ */
.triptico {
  background: var(--noite);
  padding-block: clamp(72px, 12vh, 140px);
}
.triptico__colunas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--moldura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.coluna {
  position: relative;
  min-width: 0;
  padding: 8px clamp(18px, 2.4vw, 40px) 0;
}
.coluna__fuste {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: linear-gradient(to top, var(--luz), rgba(124, 192, 238, 0.12));
  transform-origin: bottom;
}
.coluna__vertical,
.coluna__figura {
  display: none;
}
.coluna__nome {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.8rem, 0.6rem + 3.2vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: -0.006em;
  hyphens: none;
  overflow-wrap: normal;
}
.coluna__desc {
  margin-top: clamp(18px, 3vh, 28px);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--branco);
  max-width: 36ch;
  text-wrap: pretty;
}
.coluna__links {
  margin-top: clamp(20px, 3.4vh, 32px);
}

/* fotos de Conscientização: grade 2 × 2 pequena */
.leque {
  list-style: none;
  margin: clamp(28px, 5vh, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 210px));
  gap: 12px;
}
.leque .foto__legenda {
  font-size: 1rem;
  padding: 5px 9px 4px 8px;
}

/* ============================================================
   Tríptico — palco fixo (desktop com movimento e partículas)
   ============================================================ */
@media (min-width: 900px) {
  .cinema .triptico {
    background: transparent;
    height: 460vh;
    padding: 0;
  }
  .cinema .triptico__palco {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .cinema .triptico__colunas {
    display: flex;
    height: 100%;
    max-width: none;
    padding: 0;
  }
  .cinema .coluna {
    --w: 0; /* 0 fechada · 1 aberta (pg-o-que-fazemos.js) */
    flex: var(--g, 1) 1 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
  }
  .cinema .coluna__fuste {
    top: var(--topo-h);
    transform: scaleY(var(--ergue, 0));
  }
  /* nome em pé, em contorno, enquanto a coluna está fechada */
  .cinema .coluna__vertical {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 17vh;
    margin: 0;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    font-family: var(--f-display);
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: min(8.6vh, 6vw);
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--branco-2);
    opacity: calc(1 - var(--w) * 1.4);
    pointer-events: none;
  }
  .cinema .coluna__vertical span {
    display: block;
    transform: translateY(calc((1 - var(--ergue, 0)) * -60%));
  }
  /* corpo com largura fixa: a coluna abre e o revela, sem o texto se refazer */
  .cinema .coluna__corpo {
    position: absolute;
    left: 0;
    top: var(--topo-h);
    bottom: 0;
    width: 75vw;
    display: grid;
    grid-template-columns: minmax(0, 35vw) minmax(0, 1fr);
    padding: 0 0 0 clamp(36px, 4vw, 72px);
    opacity: var(--w);
    transform: translateX(calc((1 - var(--w)) * 6vw));
  }
  .cinema .coluna:not(.coluna--aberta) .coluna__corpo {
    pointer-events: none;
  }
  .cinema .coluna__texto {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding-bottom: clamp(56px, 11vh, 120px);
  }
  .cinema .coluna__nome {
    font-size: min(5.5vw, 12vh);
    white-space: nowrap;
    margin-bottom: 0.04em;
  }
  .cinema .coluna__figura {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    height: 62vh;
  }
  /* as fotos em leque no meio da figura; os anéis de partículas se propagam em volta */
  .cinema .leque {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    position: relative;
    display: block;
    width: clamp(170px, 14vw, 230px);
    height: 0;
    margin: 0;
  }
  .cinema .leque__foto {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: translate(var(--x), calc(var(--y) - 50%)) rotate(var(--giro));
    transition: transform 0.9s var(--ease);
  }
  .cinema .leque:hover .leque__foto { transition-duration: 0.7s; }
  .cinema .leque:hover .leque__foto:nth-child(1) { --x: -62% !important; }
  .cinema .leque:hover .leque__foto:nth-child(2) { --x: 60% !important; }
  .cinema .leque:hover .leque__foto:nth-child(3) { --x: -56% !important; }
  .cinema .leque:hover .leque__foto:nth-child(4) { --x: 64% !important; }
  .cinema .leque .foto__ver {
    box-shadow: 0 18px 46px rgba(1, 8, 16, 0.55);
    border: 3px solid var(--branco);
    border-radius: 4px;
  }
  .cinema .leque .foto__legenda {
    left: -3px;
    bottom: -3px;
  }
}

/* sem palco, em telas médias: um pilar embaixo do outro */
@media (min-width: 900px) and (max-width: 1199px) {
  html:not(.cinema) .triptico__colunas {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }
}

/* ============================================================
   Celular
   ============================================================ */
@media (max-width: 899px) {
  .pagina [data-ancora="pilares"] {
    left: 6vw;
    width: 88vw;
    top: calc(var(--topo-h) + 2vh);
    height: 36vh;
  }
  .triptico__colunas {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(56px, 9vh, 88px);
  }
  .coluna {
    padding: 0 0 0 22px;
  }
  .coluna__nome {
    font-size: clamp(2.8rem, 0.6rem + 9.4vw, 4.6rem);
  }
  /* com partículas: cada pilar ocupa a tela, a figura fica no alto (âncora fixa) */
  .cinema:not(.sem-cena) .triptico {
    background: transparent;
    padding-block: 0 8vh;
  }
  .cinema:not(.sem-cena) .triptico__colunas {
    gap: 0;
  }
  .cinema:not(.sem-cena) .coluna {
    min-height: 100svh;
    padding-top: calc(var(--topo-h) + 42vh);
    padding-bottom: 8vh;
  }
  .cinema:not(.sem-cena) .coluna__fuste {
    top: calc(var(--topo-h) + 42vh);
  }
}
/* celular deitado: a figura vai para a direita (paginas.css), então o pilar não precisa
   do respiro de 42vh no alto e o texto fica na coluna da esquerda */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .cinema:not(.sem-cena) .coluna {
    padding-top: calc(var(--topo-h) + 6vh);
    padding-right: 40vw;
  }
  .cinema:not(.sem-cena) .coluna__fuste {
    top: calc(var(--topo-h) + 6vh);
  }
}
@media (max-width: 420px) {
  .leque {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .leque__foto {
    transition: none !important;
  }
}