/* =========================================================================
   Lumin'área · ajustes da reunião de 06/10/2026 (Cinara e Carol, 2h05)

   Só desenha. Nenhuma palavra mora aqui. Cada bloco leva o minuto da reunião
   onde o pedido foi feito, para quem for conferir.
   ========================================================================= */

:root{
  /* o quadradinho aceso da Lumin'área: 7px, centro mais claro, halo suave.
     Trava de 29/09 da Central, agora também no site (1:02:25, 1:02:34) */
  --marcador:radial-gradient(circle at 50% 45%,#FFF6C8 0%,var(--luz) 62%);
  --marcador-halo:0 0 0 1px rgba(240,203,0,.35),0 0 8px 1px rgba(240,203,0,.55);
}

/* ---------------------------------------------------------------- 1 · banner
   Todas as internas na mesma altura, mais baixa que a de antes (59:20,
   1:08:06, 1:11:07). A altura não depende mais da altura da janela, e por
   isso é a mesma em todas as páginas. */
#pagina .capa:not(.capa-limpa){min-height:clamp(300px,29vw,420px)}
@media (max-width:760px){
  #pagina .capa:not(.capa-limpa){min-height:clamp(300px,82vw,390px)}
}

/* ----------------------------------------- 2 · "Conduzido por" sob o título
   Pequeno e discreto, logo embaixo da frase do banner (59:43 a 59:57). */
#pagina .capa .conduzido-capa{
  margin:clamp(14px,1.5vw,20px) 0 0;font-size:13px;letter-spacing:.03em;
  color:rgba(247,242,233,.9);max-width:none;text-shadow:0 1px 12px rgba(14,10,7,.7);
}
#pagina .capa .conduzido-capa a{
  color:var(--marfim);text-decoration:underline;
  text-decoration-color:rgba(240,203,0,.75);text-underline-offset:3px;
}
#pagina .capa .conduzido-capa a:hover{text-decoration-color:var(--luz)}
/* sem a linha no topo do corpo, o texto sobe e não sobra espaço vazio */
.faixa-info + .corpo-pagina{padding-top:clamp(30px,3.4vw,52px)}

/* ----------------------------------------------- 3 · uma foto ao lado do
   "Especialmente para você se" em cada experiência (1:10:30 a 1:11:07) */
.sm-bloco-foto{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,31%,380px);
  column-gap:clamp(28px,4.4vw,72px);align-items:start;
}
.sm-bloco-foto > .texto-lado{grid-column:1;min-width:0}
.sm-bloco-foto > .foto-lado{grid-column:2;margin:0;align-self:start}
.foto-lado picture,.foto-lado img{display:block;width:100%}
.foto-lado img{height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.foto-pulo img{aspect-ratio:1/1;object-position:50% 70%}
@media (max-width:820px){
  .sm-bloco-foto{grid-template-columns:1fr}
  .sm-bloco-foto > .foto-lado{grid-column:1;margin-top:26px}
  .foto-lado img{aspect-ratio:4/3}
  .foto-pulo img{aspect-ratio:1/1}
}

/* ------------------------------------------ 4 · o percurso, padrão Meditação
   Sem a linha de cima e sem a escada. Cada cartão fecha com a linha amarela
   embaixo, e um número com quadradinho que vai acendendo, devagar, na
   entrada e quando o mouse passa (1:02:47, 1:04:29, 1:11:25). */
.corpo-pagina .sm-capacidades.percurso{counter-reset:passo}
.corpo-pagina .sm-capacidades.percurso li{
  counter-increment:passo;position:relative;
  border-top:1px solid var(--linho);border-bottom:3px solid var(--luz);
  padding-bottom:calc(clamp(20px,2.2vw,30px) + 40px);
  transition:transform .5s var(--calma,ease),box-shadow .5s ease;
}
.corpo-pagina .sm-capacidades.percurso li:hover,
.corpo-pagina .sm-capacidades.percurso li:focus-within{
  transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(34,24,18,.35);
}
/* o número */
.corpo-pagina .sm-capacidades.percurso li::before{
  content:counter(passo,decimal-leading-zero);display:block;
  position:absolute;left:calc(clamp(20px,2.2vw,30px) + 18px);bottom:15px;
  width:auto;height:auto;margin:0;
  -webkit-mask:none;mask:none;-webkit-mask-image:none;mask-image:none;
  background:none;
  font-size:12px;line-height:1;letter-spacing:.24em;font-weight:600;
  color:var(--rotulo);transition:color .5s ease;
}
/* o quadradinho do número: forma própria de cada página (1:13:21) */
#pagina .percurso > li::after{
  content:"";position:absolute;
  left:clamp(20px,2.2vw,30px);right:auto;top:auto;bottom:15px;
  width:8px;height:8px;transform:rotate(var(--giro,0deg));transform-origin:center;
  border-radius:var(--forma,0);
  background:var(--areia);box-shadow:none;opacity:1;pointer-events:none;
  transition:background .5s ease,box-shadow .5s ease;
}
.corpo-pagina .sm-capacidades.percurso li:hover::before,
.corpo-pagina .sm-capacidades.percurso li:focus-within::before{color:var(--tinta)}
#pagina .percurso > li:hover::after,
#pagina .percurso > li:focus-within::after{background:var(--marcador);box-shadow:var(--marcador-halo)}
/* na entrada, cada quadradinho acende na sua vez e fica aceso */
#pagina .percurso.ri-entrou > li::after{
  animation:aj-acende 1.6s var(--lento,ease) calc(.4s + var(--i,0) * var(--ri-degrau,.55s)) 1 both;
}
#pagina .percurso.ri-entrou > li::before{
  animation:aj-numero 1.6s var(--lento,ease) calc(.4s + var(--i,0) * var(--ri-degrau,.55s)) 1 both;
}
@keyframes aj-acende{
  0%{background:var(--areia);box-shadow:none}
  100%{background:var(--marcador);box-shadow:var(--marcador-halo)}
}
@keyframes aj-numero{
  0%{color:var(--rotulo)}
  100%{color:var(--tinta)}
}

/* ------------------------------------------ 5 · os marcadores das listas
   O quadradinho iluminado no lugar do losango (1:02:25 a 1:02:34). Parado. */
.sinais-empresa li::before{
  left:3px;top:28px;width:7px;height:7px;border:0;transform:none;
  background:var(--marcador);box-shadow:var(--marcador-halo);
}
#pagina[data-ri-rota] .sinais-empresa.ri-entrou > li::before{
  animation:aj-halo 2s var(--lento,ease) calc(.35s + var(--i,0) * 170ms) 1 both;
}
@keyframes aj-halo{
  0%{box-shadow:0 0 0 1px rgba(240,203,0,0),0 0 0 0 rgba(240,203,0,0)}
  40%{box-shadow:0 0 0 1px rgba(240,203,0,.6),0 0 16px 3px rgba(240,203,0,.7)}
  100%{box-shadow:var(--marcador-halo)}
}

/* ------------------------------------- 6 · luz sutil ao passar o mouse
   Botões e imagens acendem bem leve, sem exagero (1:04:58 a 1:05:38). */
#pagina .btn-solido,#pagina .btn-linha{transition:box-shadow .5s ease,border-color .4s ease,background-color .4s ease,color .4s ease}
#pagina .btn-solido:hover,#pagina .btn-solido:focus-visible,
#pagina .btn-linha:hover,#pagina .btn-linha:focus-visible{
  box-shadow:0 0 0 1px rgba(240,203,0,.55),0 0 20px rgba(240,203,0,.28);
}
#pagina .entrada figure,#pagina .foto-lado,#pagina .conduz-retrato{transition:box-shadow .6s ease,filter .6s ease}
#pagina .entrada figure:hover,#pagina .foto-lado:hover,#pagina .conduz-retrato:hover{
  filter:brightness(1.05) saturate(1.04);
  box-shadow:0 0 0 1px rgba(240,203,0,.35),0 12px 34px rgba(240,203,0,.2);
}

/* ------------------------------------------- 7 · enquadramentos dos banners
   O olho fechado com os cílios aparecendo, e só um tiquinho do queixo (1:08:57,
   1:12:06). Mais baixo o banner, mais o enquadramento importa. */
#pagina .capa-olhos picture img{object-position:50% 9%}
#pagina .capa-fala picture img{object-position:50% 30%}

/* ------------------------------------------ 8 · quem acende "por dentro"
   O amarelo do título do Self Mentoring fica em "dentro", e "fora" fica em
   branco (1:19:11 a 1:19:31). Nada a fazer aqui: a marca mora no HTML. */

/* --------------------------------------- 9 · a letra R que a luz comia
   A palavra acesa é um texto com fundo recortado, e o recorte parava no fim
   da última letra. Quando a próxima era o ponto branco, o R perdia a perna
   (1:06:49, 1:14:15, 1:14:50). Ganha um respiro de cada lado, sem mudar o
   espaço do texto. */
html .rasc-varre{
  padding-inline:.09em;margin-inline:-.09em;
  padding-block:.06em;margin-block:-.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ----------------------------- 10 · a esferinha com o rosto, no Quem conduz
   O retrato redondo da Cinara ao lado de "Quem conduz" (1:03:12). */
.conduz-exp{margin-top:6px;align-items:center}
.conduz-exp .conduz-retrato{width:clamp(96px,10vw,140px)}

/* ---------------------------- 11 · espaço igual entre os blocos
   O vazio entre blocos era de 109px no computador, e a Cinara viu espaço
   sobrando na Experiências e no começo das páginas (1:15:48, 1:32:24). Um
   passo só, igual em todas as internas. */
.corpo-pagina > .sm-bloco{margin-top:clamp(40px,4.6vw,68px)}
.corpo-pagina > .sm-bloco:first-child{margin-top:0}
.sm-bloco-fecho > .titulo-2{margin-bottom:clamp(12px,1.4vw,18px)}

/* ------------------------------ 12 · sem negrito pesado fora do padrão
   Na Bendita Pausa, duas frases do fecho saíam em negrito 700, mais pesado
   que os próprios títulos (1:07:53). Voltam ao peso das frases em destaque. */
.corpo-pagina .sm-bloco-fecho p.destaque > b{font-weight:inherit}

/* --------------------------------------------- 13 · Self Mentoring
   O espaço do vídeo (1:30:20 a 1:31:58): moldura de traço fino, linhas retas,
   menor que o bloco da LuzIA. Escondido até existir o arquivo. */
.sm-bio-grade.com-video{
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:center;
}
.sm-video{margin:0;border:1px solid var(--areia);border-radius:0;background:var(--gelo);aspect-ratio:16/9;overflow:hidden}
.sm-video[hidden]{display:none}
.sm-video video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.sm-bio-grade.com-video{grid-template-columns:1fr}}

/* Quem conduz com duas fontes só: o corpo e a frase em destaque (1:29:54) */
#sm-bio .conduz-sm p{font-size:16.5px;line-height:1.7;color:var(--tinta);max-width:62ch}
#sm-bio > p.destaque{
  margin-top:clamp(22px,2.6vw,34px);font-size:clamp(19px,1.7vw,22px);line-height:1.45;
  font-weight:500;color:var(--tinta);max-width:44ch;
}

/* Como funciona em blocos, com as mesmas palavras dela (1:28:34 a 1:29:14) */
.como-blocos li{border-top:1px solid var(--linho);border-bottom:3px solid var(--luz)}
.como-blocos li p{font-size:16px;line-height:1.55;color:var(--tinta)}
.como-notas{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);margin-top:clamp(24px,3vw,40px);
}
.como-notas p{
  margin:0;padding-top:16px;border-top:1px solid var(--linho);
  font-size:15.5px;line-height:1.7;color:var(--tinta-suave);max-width:none;text-wrap:pretty;
}
@media (max-width:900px){.como-notas{grid-template-columns:1fr}}

/* ----------------------------------------------- 14 · Para Empresas
   Menos espaço em cima e embaixo (1:32:24), blocos mais próximos, ícone de
   linha fina à esquerda de cada forma de trabalhar, com o texto deslocado
   para abrir lugar (1:33:17 a 1:33:45). O fio de luz que riscava o texto
   saiu do JavaScript. */
.corpo-pagina{padding-block:clamp(36px,3.8vw,56px)}
.sm-bloco-foto > p{grid-column:1}
.forma-empresa{
  position:relative;padding-left:clamp(58px,6vw,80px);
  padding-block:clamp(20px,2.2vw,30px);
}
.forma-empresa:first-of-type{padding-top:0}
.forma-empresa::before{
  content:"";position:absolute;left:0;top:clamp(20px,2.2vw,30px);
  width:36px;height:36px;background-color:var(--terra);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.forma-empresa:first-of-type::before{top:2px}
.forma-empresa:nth-of-type(1)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.5 19c.8-3.6 3.4-5.4 6.5-5.4s5.7 1.8 6.5 5.4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.5 19c.8-3.6 3.4-5.4 6.5-5.4s5.7 1.8 6.5 5.4'/%3E%3C/svg%3E");
}
.forma-empresa:nth-of-type(2)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='17' r='1.8'/%3E%3Ccircle cx='12' cy='8' r='1.8'/%3E%3Ccircle cx='19' cy='16' r='1.8'/%3E%3Cpath d='M6.4 15.4 10.7 9.5M13.4 9.3l4.3 5.2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='17' r='1.8'/%3E%3Ccircle cx='12' cy='8' r='1.8'/%3E%3Ccircle cx='19' cy='16' r='1.8'/%3E%3Cpath d='M6.4 15.4 10.7 9.5M13.4 9.3l4.3 5.2'/%3E%3C/svg%3E");
}
.forma-empresa:nth-of-type(3)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.2 12 4.5l8 6.7'/%3E%3Cpath d='M6.2 10v9.5h11.6V10'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.2 12 4.5l8 6.7'/%3E%3Cpath d='M6.2 10v9.5h11.6V10'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E");
}
@media (max-width:640px){
  .forma-empresa{padding-left:50px}
  .forma-empresa::before{width:30px;height:30px}
}

/* ------------------------------------------------ 15 · depoimentos
   O texto curto no meio do cartão, para o cartão não parecer vazio ao lado
   de um cheio (52:19 a 52:55). */
.trilha-depoimentos blockquote{display:flex;align-items:center}

/* ----------------------------------------------- 16 · os 33 passos
   O número grande ficava sozinho, sem a palavra (50:53 a 51:23). */
.passos-unid{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--tinta);margin-left:-6px;white-space:nowrap;
}

/* ------------------------------ 17 · a frase do investimento
   Colada na lista de cima, com zero de espaço (1:29:04). */
.corpo-pagina .sm-bloco > .sinais-empresa + p{margin-top:clamp(22px,2.6vw,32px)}
.sm-bloco-foto .cabeca{margin-bottom:clamp(14px,1.6vw,22px)}
.sm-bloco-foto > .texto-lado > .sinais-empresa{margin-top:0}

/* ----------------------------- 18 · rosto inteiro nos banners
   Na conferência de uso, o banner de Para Empresas mostrava a mulher só do
   nariz para baixo, e o de Suas Vivências o homem também. O recorte sobe
   para os olhos aparecerem. */
#pagina .capa-lideres picture img{object-position:50% 31%}
#pagina[data-ri-rota="hospedagem"] .capa picture img{object-position:50% 18%}

/* ----------------------------- 19 · a foto cabe no quadro do texto ao lado
   Pedido da Carol (revisão de 06/10, tarde): a foto fica dentro do quadrante do
   texto, nem mais alta nem mais baixa. A linha da grade tem a altura do texto,
   e a foto preenche exatamente essa altura, de cima a baixo. */
.sm-bloco-foto{align-items:stretch}
.sm-bloco-foto > .foto-lado{
  position:relative;align-self:stretch;margin:0;min-height:230px;overflow:hidden;border-radius:2px;
}
.sm-bloco-foto > .foto-lado picture{position:absolute;inset:0;display:block}
.sm-bloco-foto > .foto-lado img{
  position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;min-height:0;max-height:none;object-fit:cover;object-position:50% 40%;
}
.foto-pulo img{object-position:50% 72%}
.foto-conversa img{object-position:50% 52%}
@media (max-width:820px){
  .sm-bloco-foto > .foto-lado{min-height:0;aspect-ratio:4/3}
  .sm-bloco-foto > .foto-pulo{aspect-ratio:1/1}
}

/* os ícones das três formas de trabalhar, em amarelo */
.forma-empresa::before{background-color:var(--luz)}

/* ------------------------------------------ 20 · o vídeo em formato story
   9:16, sem moldura de celular, com a borda fina de linha reta. A foto dela
   em preto e branco só marca o lugar até o vídeo chegar. */
.conduz-video{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:center;margin-top:6px}
.sm-video-story{
  margin:0;width:clamp(150px,16vw,210px);aspect-ratio:9/16;
  border:1px solid var(--areia);overflow:hidden;background:var(--gelo);
}
.sm-video-story picture,.sm-video-story img,.sm-video-story video{display:block;width:100%;height:100%}
.sm-video-story img,.sm-video-story video{object-fit:cover;object-position:50% 18%}
.sm-video-story img{filter:grayscale(1) contrast(1.03)}
@media (max-width:640px){.conduz-video{grid-template-columns:1fr}.sm-video-story{width:min(210px,60%)}}

/* ----------------------------- 21 · enquadramentos revistos
   Meditação: a cabeça de quem está no fim da fila não pode ser cortada.
   Bem-dita Fala!: só o queixo para baixo, sem mostrar o rosto. */
#pagina[data-ri-rota="medit-acao"] .capa picture img{object-position:50% 34%}
#pagina .capa-fala picture img{object-position:50% 60%}
/* 06/10 noite: no celular a faixa visível subia até os rostos; ali a foto desce até o fim */
/* 07/10, conferência da reunião: o sugestoes-0610.css carrega depois e passava por cima no celular, por isso o html na frente */
@media (max-width:640px){html #pagina .capa-fala picture img{object-position:50% 100%}}

/* quem reduz movimento vê tudo já aceso, sem animar */
@media (prefers-reduced-motion:reduce){
  #pagina .percurso > li::after{background:var(--marcador);box-shadow:var(--marcador-halo);animation:none}
  #pagina .percurso > li::before{color:var(--tinta);animation:none}
  .corpo-pagina .sm-capacidades.percurso li,.corpo-pagina .sm-capacidades.percurso li:hover{transform:none;transition:none}
  #pagina[data-ri-rota] .sinais-empresa.ri-entrou > li::before{animation:none}
}