/* =========================================================================
   Lumin'área · as ideias que a Cinara marcou como "Quero no site"
   (página de entregas, bloco Sugestões, 30/09/2026), postas no ar em 05/10.

   Regra deste arquivo: nenhum texto dela muda. O movimento entra em volta
   do que já está escrito, por classe e por estrutura, e o js/movimento.js
   só acrescenta o que é desenho. Sem JavaScript, ou com movimento reduzido,
   tudo aparece no estado final e parado: o estado de antes de acender só
   vale com html.mov-js, e a animação só roda com .acesa.
   ========================================================================= */

@keyframes mov-aparece{from{opacity:0}to{opacity:1}}
@keyframes mov-fio{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mov-ergue{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@keyframes mov-nitido{from{filter:blur(6px);opacity:.35}to{filter:none;opacity:1}}
@keyframes mov-degrau{from{opacity:.3;border-top-color:var(--linho)}to{opacity:1;border-top-color:var(--luz)}}
@keyframes mov-pousa{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes mov-vem-e{from{opacity:0;transform:translateX(-32%)}to{opacity:1;transform:none}}
@keyframes mov-vem-d{from{opacity:0;transform:translateX(32%)}to{opacity:1;transform:none}}
@keyframes mov-junta-a{from{opacity:0;transform:translateY(-20%)}to{opacity:1;transform:none}}
@keyframes mov-junta-b{from{opacity:0;transform:translate(-20%,12%)}to{opacity:1;transform:none}}
@keyframes mov-junta-g{from{opacity:0;transform:translate(20%,12%)}to{opacity:1;transform:none}}
@keyframes mov-painel{
  35%{background:#FBF1CC;border-color:var(--luz);box-shadow:0 0 0 1px var(--luz),0 12px 30px -18px rgba(240,203,0,.9)}
}

/* o texto que ganhou um gêmeo desenhado continua na página para quem lê com
   leitor de tela e para a busca; some só da vista. Com a caneta da Edição
   acesa, volta a ser ele, para ela clicar e escrever no lugar de sempre. */
.mov-original{
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0!important;padding:0!important;
}
body.ed-on .mov-original{
  position:static!important;width:auto!important;height:auto!important;overflow:visible!important;
  clip:auto;clip-path:none;white-space:normal;
}
body.ed-on .mov-gemeo{display:none!important}
.mov-gemeo.sem-anima,.mov-gemeo.sem-anima *{animation:none!important}

/* =================================================== Bem-dita Fala
   Ideia 9 · Nem calar. Nem ferir.
   As duas frases do topo entram de lados opostos e se encontram. Só então
   aparece o caminho entre elas: a chamada, com um fio de luz em cima. */
.nem-gemeo{margin:0;font-weight:600;text-wrap:balance}
.nem-gemeo span{display:inline-block}
.nem-gemeo ~ [data-ed="b28.fala-chamada"]::before{
  content:"";display:block;width:60px;height:2px;background:var(--luz);margin:0 0 18px;transform-origin:left;
}
.mov-js .nem-gemeo:not(.acesa) .nem-e{opacity:0;transform:translateX(-32%)}
.mov-js .nem-gemeo:not(.acesa) .nem-d{opacity:0;transform:translateX(32%)}
.mov-js .nem-gemeo:not(.acesa) ~ [data-ed="b28.fala-chamada"]{opacity:0}
.nem-gemeo.acesa .nem-e{animation:mov-vem-e 1.4s var(--calma) .25s both}
.nem-gemeo.acesa .nem-d{animation:mov-vem-d 1.4s var(--calma) .4s both}
.nem-gemeo.acesa ~ [data-ed="b28.fala-chamada"]{animation:mov-aparece 1.2s ease 1.6s both}
.nem-gemeo.acesa ~ [data-ed="b28.fala-chamada"]::before{animation:mov-fio .9s ease 1.6s both}

/* Ideia 10 · O intervalo em quatro tempos.
   As linhas do "Antes da fala" viram caixas ligadas por um fio, e cada uma
   sai do desfoque para o nítido. */
.intervalo-luz{
  list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:28px;counter-reset:iv;
}
.intervalo-luz li{
  counter-increment:iv;position:relative;padding:20px 18px 22px;
  background:var(--branco);border:1px solid var(--linho);
  font-size:clamp(17px,1.4vw,19px);font-weight:600;letter-spacing:-.02em;line-height:1.3;
  color:var(--tinta);text-wrap:balance;
}
.intervalo-luz li::before{
  content:counter(iv);display:block;margin-bottom:10px;
  font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--rotulo);
}
.intervalo-luz li:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-29px;width:28px;height:2px;background:var(--luz);transform-origin:left;
}
.mov-js .intervalo-luz:not(.acesa) li{filter:blur(6px);opacity:.35}
.mov-js .intervalo-luz:not(.acesa) li::after{transform:scaleX(0)}
.intervalo-luz.acesa li{animation:mov-nitido 1.2s ease both}
.intervalo-luz.acesa li::after{animation:mov-fio .5s ease both}
.intervalo-luz.acesa li:nth-child(1){animation-delay:.1s}
.intervalo-luz.acesa li:nth-child(1)::after{animation-delay:.8s}
.intervalo-luz.acesa li:nth-child(2){animation-delay:.9s}
.intervalo-luz.acesa li:nth-child(2)::after{animation-delay:1.6s}
.intervalo-luz.acesa li:nth-child(3){animation-delay:1.7s}
.intervalo-luz.acesa li:nth-child(3)::after{animation-delay:2.4s}
.intervalo-luz.acesa li:nth-child(4){animation-delay:2.5s}
.intervalo-luz.acesa li:nth-child(5){animation-delay:3.3s}
@media (max-width:820px){
  .intervalo-luz{grid-auto-flow:row;grid-auto-columns:auto;gap:18px}
  .intervalo-luz li:not(:last-child)::after{top:100%;left:24px;right:auto;width:2px;height:18px;transform-origin:top}
  .mov-js .intervalo-luz:not(.acesa) li::after{transform:scaleY(0)}
  .intervalo-luz.acesa li::after{animation-name:mov-ergue}
}

/* =================================================== Bendita Pausa
   Ideia 7 · O percurso sobe como uma escada de luz.
   Os quatro passos viram degraus; um fio amarelo sobe de um para o outro e
   cada degrau acende quando a luz chega. */
.sm-capacidades.escada-luz li{position:relative;border-top-color:var(--luz)}
.mov-js .escada-luz:not(.acesa) li{opacity:.3;border-top-color:var(--linho)}
.mov-js .escada-luz:not(.acesa) li::before,
.mov-js .escada-luz:not(.acesa) li::after{opacity:0}
.escada-luz.acesa li{animation:mov-degrau .9s var(--calma) both}
.escada-luz.acesa li::before,.escada-luz.acesa li::after{animation:mov-aparece .5s ease both}
.escada-luz.acesa li:nth-child(1){animation-delay:.1s}
.escada-luz.acesa li:nth-child(1)::before,.escada-luz.acesa li:nth-child(1)::after{animation-delay:.6s}
.escada-luz.acesa li:nth-child(2){animation-delay:.8s}
.escada-luz.acesa li:nth-child(2)::before,.escada-luz.acesa li:nth-child(2)::after{animation-delay:1.3s}
.escada-luz.acesa li:nth-child(3){animation-delay:1.5s}
.escada-luz.acesa li:nth-child(3)::before,.escada-luz.acesa li:nth-child(3)::after{animation-delay:2s}
.escada-luz.acesa li:nth-child(4){animation-delay:2.2s}

/* no computador, os quatro numa linha, cada um um degrau acima do outro */
@media (min-width:1041px){
  .sm-capacidades.escada-luz{gap:28px;padding-top:150px;align-items:stretch}
  .escada-luz li:nth-child(2){transform:translateY(-50px)}
  .escada-luz li:nth-child(3){transform:translateY(-100px)}
  .escada-luz li:nth-child(4){transform:translateY(-150px)}
  .escada-luz.acesa li:nth-child(n){animation-name:mov-degrau}
  /* o fio: sai do alto do degrau, sobe 50px e entra no alto do próximo */
  .sm-capacidades.escada-luz li:not(:last-child)::before{
    display:block;content:"";position:absolute;left:100%;top:-50px;width:15px;height:53px;margin:0;
    background:none;-webkit-mask:none;mask:none;
    border-right:3px solid var(--luz);border-bottom:3px solid var(--luz);box-sizing:border-box;
  }
  .sm-capacidades.escada-luz li:not(:last-child)::after{
    content:"";position:absolute;left:calc(100% + 12px);top:-50px;width:17px;height:3px;background:var(--luz);
  }
}
/* no celular, um embaixo do outro, cada degrau um passo para dentro, e o
   fio descendo de um para o seguinte */
@media (max-width:820px){
  .escada-luz li:nth-child(2){margin-left:14px}
  .escada-luz li:nth-child(3){margin-left:28px}
  .escada-luz li:nth-child(4){margin-left:42px}
  .sm-capacidades.escada-luz li:not(:last-child)::after{
    content:"";position:absolute;top:100%;left:22px;width:3px;height:clamp(14px,1.6vw,22px);background:var(--luz);
  }
}

/* =================================================== Self Mentoring
   Ideia 12 · As três capacidades se encontram.
   Três círculos de luz que se aproximam e se sobrepõem; no encontro dos
   três, o Self Mentoring. A pele aqui é a do método: cobre, taupe e areia,
   e nenhum amarelo, como manda a ID de 23/09. */
.venn-luz{position:relative;width:min(100%,470px);aspect-ratio:1/.92;margin:6px auto clamp(30px,3.4vw,48px)}
.venn-c{
  position:absolute;width:58%;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;mix-blend-mode:multiply;
  box-shadow:0 0 46px -6px rgba(176,122,82,.22);
}
.venn-c b{
  display:block;max-width:80%;text-align:center;
  font-size:clamp(10.5px,1.05vw,12.5px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.3;color:var(--tinta);
}
.venn-c.a{left:21%;top:0;justify-content:flex-start;padding-top:15%;
  background:radial-gradient(circle at 50% 42%,rgba(176,122,82,.34),rgba(176,122,82,.14) 72%)}
.venn-c.b{left:0;bottom:0;justify-content:flex-end;padding:0 20% 19% 0;
  background:radial-gradient(circle at 46% 52%,rgba(188,172,157,.55),rgba(188,172,157,.24) 72%)}
.venn-c.g{right:0;bottom:0;justify-content:flex-end;padding:0 0 19% 20%;
  background:radial-gradient(circle at 54% 52%,rgba(147,128,111,.38),rgba(147,128,111,.15) 72%)}
.venn-luz .venn-meio{
  position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);margin:0;max-width:none;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  color:var(--tinta);background:var(--branco);padding:7px 10px;border:1px solid #B07A52;
}
.mov-js .venn-luz:not(.acesa) .venn-c.a{opacity:0;transform:translateY(-20%)}
.mov-js .venn-luz:not(.acesa) .venn-c.b{opacity:0;transform:translate(-20%,12%)}
.mov-js .venn-luz:not(.acesa) .venn-c.g{opacity:0;transform:translate(20%,12%)}
.mov-js .venn-luz:not(.acesa) .venn-meio{opacity:0}
.venn-luz.acesa .venn-c.a{animation:mov-junta-a 1.7s var(--calma) both}
.venn-luz.acesa .venn-c.b{animation:mov-junta-b 1.7s var(--calma) .35s both}
.venn-luz.acesa .venn-c.g{animation:mov-junta-g 1.7s var(--calma) .7s both}
.venn-luz.acesa .venn-meio{animation:mov-aparece 1s ease 2.4s both}

/* =================================================== Para Empresas
   Ideia 13 · Como começamos, em quatro caixas ligadas.
   Um fio de luz liga as caixas e volta do fim para o começo, porque a
   proposta é de continuidade. */
.sm-capacidades.elos-luz{position:relative}
.sm-capacidades.elos-luz li{position:relative;border-top-color:var(--luz)}
.sm-capacidades.elos-luz::after{content:"";position:absolute;pointer-events:none;border:2px dashed var(--luz)}
@media (min-width:1041px){
  .sm-capacidades.elos-luz{gap:28px;margin-bottom:38px}
  .sm-capacidades.elos-luz li:not(:last-child)::after{
    content:"";position:absolute;top:44px;right:-29px;width:28px;height:2px;background:var(--luz);transform-origin:left;
  }
  .sm-capacidades.elos-luz::after{left:12.5%;right:12.5%;top:100%;height:26px;border-top:0}
}
@media (min-width:821px) and (max-width:1040px){
  .sm-capacidades.elos-luz{gap:28px}
  .sm-capacidades.elos-luz li:nth-child(odd)::after{
    content:"";position:absolute;top:44px;right:-29px;width:28px;height:2px;background:var(--luz);transform-origin:left;
  }
  .sm-capacidades.elos-luz::after{display:none}
}
@media (max-width:820px){
  .sm-capacidades.elos-luz{padding-left:22px}
  .sm-capacidades.elos-luz li:not(:last-child)::after{
    content:"";position:absolute;top:100%;left:28px;width:2px;height:clamp(14px,1.6vw,22px);background:var(--luz);transform-origin:top;
  }
  .sm-capacidades.elos-luz::after{left:0;top:30px;bottom:30px;width:14px;border-right:0}
}
/* 05/10, Histórico de ajustes da Cinara: sai o passo "Integramos", e Como
   começamos fica em três caixas. O fio que voltava do fim para o começo
   dizia continuidade, que era o Integramos, e sai junto. */
.sm-capacidades.elos-luz.elos-tres::after{display:none}
@media (min-width:901px) and (max-width:1040px){
  .sm-capacidades.elos-luz.elos-tres li:nth-child(odd)::after{content:none}
  .sm-capacidades.elos-luz.elos-tres li:not(:last-child)::after{
    content:"";position:absolute;top:44px;right:-29px;width:28px;height:2px;background:var(--luz);transform-origin:left;
  }
}
@media (min-width:821px) and (max-width:900px){
  .sm-capacidades.elos-luz.elos-tres li::after{content:none}
}
.mov-js .elos-luz:not(.acesa) li{opacity:.3;border-top-color:var(--linho)}
.mov-js .elos-luz:not(.acesa) li::after{transform:scale(0)}
.mov-js .elos-luz:not(.acesa)::after{opacity:0}
.elos-luz.acesa li{animation:mov-degrau .9s ease both}
.elos-luz.acesa li::after{animation:mov-aparece .5s ease both}
.elos-luz.acesa::after{animation:mov-aparece 1.2s ease 3.2s both}
.elos-luz.acesa li:nth-child(1){animation-delay:.1s}
.elos-luz.acesa li:nth-child(1)::after{animation-delay:.7s}
.elos-luz.acesa li:nth-child(2){animation-delay:.9s}
.elos-luz.acesa li:nth-child(2)::after{animation-delay:1.5s}
.elos-luz.acesa li:nth-child(3){animation-delay:1.7s}
.elos-luz.acesa li:nth-child(3)::after{animation-delay:2.3s}
.elos-luz.acesa li:nth-child(4){animation-delay:2.5s}

/* Ideia 14 · A Casa para empresas, em camadas.
   Primeiro o espaço, depois a experiência, depois a facilitação, uma camada
   pousando sobre a outra. */
.sm-capacidades.camadas-luz{display:flex;flex-direction:column-reverse;gap:10px;max-width:760px}
.sm-capacidades.camadas-luz li{
  display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:6px 22px;align-items:center;
  padding:18px 22px;border:1px solid var(--linho);border-top:1px solid var(--linho);
}
.sm-capacidades.camadas-luz .titulo-3{margin:0}
.sm-capacidades.camadas-luz li:nth-child(1){background:var(--gelo)}
.sm-capacidades.camadas-luz li:nth-child(2){background:#F6EFDF;margin:0 4%}
.sm-capacidades.camadas-luz li:nth-child(3){background:#FAEFC6;margin:0 8%;border-color:#EBD27A}
.mov-js .camadas-luz:not(.acesa) li{opacity:0;transform:translateY(-26px)}
.camadas-luz.acesa li{animation:mov-pousa 1s var(--calma) both}
.camadas-luz.acesa li:nth-child(1){animation-delay:.1s}
.camadas-luz.acesa li:nth-child(2){animation-delay:.6s}
.camadas-luz.acesa li:nth-child(3){animation-delay:1.1s}
@media (max-width:640px){
  .sm-capacidades.camadas-luz li{grid-template-columns:1fr;padding:16px 18px}
  .sm-capacidades.camadas-luz li:nth-child(2){margin:0 3%}
  .sm-capacidades.camadas-luz li:nth-child(3){margin:0 6%}
}

/* Ideia 15 · Os temas acendem como um painel.
   Os seis territórios acendem em sequência, e quem é do RH acha o tema da
   própria empresa num olhar. */
.sm-capacidades.painel-luz li{transition:background .4s ease,border-color .4s ease,transform .4s ease}
.sm-capacidades.painel-luz li:hover{background:#FBF4D9;border-color:var(--luz);transform:translateY(-3px)}
.painel-luz.acesa li{animation:mov-painel 1.5s ease backwards}
.painel-luz.acesa li:nth-child(1){animation-delay:.1s}
.painel-luz.acesa li:nth-child(2){animation-delay:.3s}
.painel-luz.acesa li:nth-child(3){animation-delay:.5s}
.painel-luz.acesa li:nth-child(4){animation-delay:.7s}
.painel-luz.acesa li:nth-child(5){animation-delay:.9s}
.painel-luz.acesa li:nth-child(6){animation-delay:1.1s}
@media (min-width:560px) and (max-width:900px){
  .sm-capacidades.painel-luz{grid-template-columns:1fr 1fr}
}

/* =================================================== A Casa
   Ideia 16 · A foto que ganha vida.
   A água da piscina, as folhas na brisa, o jardim atrás do vidro e o sol
   entrando no salão se mexem devagar, feitos a partir das fotos dela, sem
   nada inventado. O desenho mora no js/movimento.js e só entra sobre a foto
   original: se ela trocar a foto na Sala, a foto nova fica parada. */
.galeria figure.foto-viva{position:relative}
.foto-viva .viva{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  filter:saturate(.85) contrast(1.02) sepia(.08);
}
.foto-viva .viva-sol{mix-blend-mode:screen}

@media (prefers-reduced-motion:reduce){
  .foto-viva .viva{display:none}
  [data-mov],[data-mov] *,[data-mov]::before,[data-mov]::after,[data-mov] *::before,[data-mov] *::after,
  [data-mov] ~ *{animation:none!important;transition:none!important}
}

/* =================================================== Home, bloco A Casa
   "Do portão ao sino, 33 passos", refeito como a Cinara pediu em 01/10:
   os 33 passos são o caminho de fora, do portão até a entrada da sala.
   A luz percorre a trilha, o número conta até 33 e, no "tocar o sino",
   o marco acende. */
@keyframes mov-trilha{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mov-passo{from{opacity:.35}to{opacity:1}}
@keyframes mov-marco{from{background:var(--linho)}to{background:var(--luz)}}
@keyframes mov-sino{from{background:var(--linho);box-shadow:none}to{background:var(--luz);box-shadow:0 0 18px 4px rgba(240,203,0,.45)}}
.passos-33{margin:28px 0 6px;padding-top:22px;border-top:1px solid var(--linho)}
.passos-33 .passos-topo{display:flex;align-items:baseline;gap:14px;margin:0 0 16px}
.passos-conta{
  font-size:clamp(44px,5vw,64px);font-weight:600;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--tinta);min-width:2ch;
}
.passos-rot{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--rotulo);line-height:1.6;text-wrap:balance}
.passos-trilha{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.passos-trilha::before,.passos-trilha::after{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:2px;background:var(--linho)}
.passos-trilha::after{background:var(--luz);transform-origin:top}
.passos-trilha li{position:relative;padding:6px 0;font-size:16px;line-height:1.5;color:var(--tinta);text-wrap:pretty}
.passos-trilha li::before{
  content:"";position:absolute;left:-24px;top:14px;width:8px;height:8px;transform:rotate(45deg);
  background:var(--luz);
}
.passos-trilha .passos-sino{font-weight:600}
.passos-trilha .passos-sino::before{left:-26px;top:12px;width:12px;height:12px;box-shadow:0 0 18px 4px rgba(240,203,0,.45)}
.mov-js .passos-33:not(.acesa) .passos-trilha::after{transform:scaleY(0)}
.mov-js .passos-33:not(.acesa) .passos-trilha li{opacity:.35}
.mov-js .passos-33:not(.acesa) .passos-trilha li::before{background:var(--linho);box-shadow:none}
.passos-33.acesa .passos-trilha::after{animation:mov-trilha 4.4s linear both}
.passos-33.acesa .passos-trilha li{animation:mov-passo .7s ease both}
.passos-33.acesa .passos-trilha li::before{animation:mov-marco .5s ease both}
.passos-33.acesa .passos-trilha .passos-sino::before{animation:mov-sino .6s ease both}
.passos-33.acesa .passos-trilha li:nth-child(1),.passos-33.acesa .passos-trilha li:nth-child(1)::before{animation-delay:.1s}
.passos-33.acesa .passos-trilha li:nth-child(2),.passos-33.acesa .passos-trilha li:nth-child(2)::before{animation-delay:1.1s}
.passos-33.acesa .passos-trilha li:nth-child(3),.passos-33.acesa .passos-trilha li:nth-child(3)::before{animation-delay:2.1s}
.passos-33.acesa .passos-trilha li:nth-child(4),.passos-33.acesa .passos-trilha li:nth-child(4)::before{animation-delay:3.1s}
.passos-33.acesa .passos-trilha li:nth-child(5),.passos-33.acesa .passos-trilha li:nth-child(5)::before{animation-delay:4.1s}
@media (prefers-reduced-motion:reduce){
  .passos-33 *,.passos-33 *::before,.passos-33 *::after{animation:none!important}
}

/* 05/10: no celular, o círculo AUTOGESTÃO começava 20% para a direita antes
   de deslizar para o lugar, e passava 18px da largura da tela (a página
   rolava de lado). Abaixo de 640px o deslize é mais curto e cabe na margem. */
@keyframes mov-junta-b-curto{from{opacity:0;transform:translate(-8%,12%)}to{opacity:1;transform:none}}
@keyframes mov-junta-g-curto{from{opacity:0;transform:translate(8%,12%)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .mov-js .venn-luz:not(.acesa) .venn-c.b{transform:translate(-8%,12%)}
  .mov-js .venn-luz:not(.acesa) .venn-c.g{transform:translate(8%,12%)}
  .venn-luz.acesa .venn-c.b{animation-name:mov-junta-b-curto}
  .venn-luz.acesa .venn-c.g{animation-name:mov-junta-g-curto}
}