/* 06/10, noite: das sugestões da prévia ficaram só as que não contrariam o que a Cinara
   aprovou. Saíram a escada da Medit_Ação (recusada na reunião, 1h07), o traço solto (1h34,
   "lixinho"), os marcadores alternados (trava do quadradinho), a moldura deslocada (ela pediu
   borda fina), o grifo, o título agitado e o minuto de pausa com frases que não são dela. */
/* =========================================================================
   Cópia de teste · 06/10/2026 · as ideias do "Não fizemos, mas sugerimos",
   levadas para as páginas internas. Nada daqui está no site no ar.
   ========================================================================= */

/* ------------------------------------------ 1 · o percurso: a linha vai conectando
   O desenho é o do site no ar (número, quadradinho, linha amarela embaixo). O que muda
   é o efeito: ao entrar na tela, a linha amarela se desenha de um cartão ao outro e o
   número acende quando a linha chega. Acontece uma vez, e fica aceso. */
#pagina .sm-capacidades.percurso > li{
  border-bottom-color:transparent;background-origin:border-box;background-clip:border-box;
  background-repeat:no-repeat;
  background-image:linear-gradient(var(--luz),var(--luz)),linear-gradient(var(--linho),var(--linho));
  background-position:left bottom,left bottom;background-size:0 3px,100% 3px;
}
#pagina .sm-capacidades.percurso.ri-entrou > li{
  animation:pv-linha .7s var(--lento,ease) calc(.3s + var(--i,0) * var(--ri-degrau,.55s)) 1 both;
}
@keyframes pv-linha{to{background-size:100% 3px,100% 3px}}

/* Bem-dita Fala!: o intervalo em quatro tempos, o que estava embaçado fica nítido, um de cada vez */
#pagina[data-ri-rota="bem-dita-fala"] .sm-capacidades.percurso > li{filter:blur(0)}
html.pv-js #pagina[data-ri-rota="bem-dita-fala"] .sm-capacidades.percurso:not(.ri-entrou) > li{filter:blur(5px);opacity:.35}
#pagina[data-ri-rota="bem-dita-fala"] .sm-capacidades.percurso.ri-entrou > li{
  animation:pv-linha .7s var(--lento,ease) calc(.3s + var(--i,0) * 1s) 1 both,pv-nitido 1.4s ease calc(.3s + var(--i,0) * 1s) 1 both;
}
@keyframes pv-nitido{from{filter:blur(5px);opacity:.35}to{filter:blur(0);opacity:1}}

/* ------------------------------------ 8 · painel que acende, um módulo depois do outro */
.pv-modulos.pv-entrou .pv-modulo{animation:pv-mod 1.8s ease calc(.2s + var(--i,0) * .5s) 1 both}
@keyframes pv-mod{
  0%{border-left-color:transparent;box-shadow:10px 10px 26px rgba(120,100,80,.12),-8px -8px 20px rgba(255,255,255,.85)}
  35%{border-left-color:var(--luz);box-shadow:10px 10px 26px rgba(120,100,80,.12),-8px -8px 20px rgba(255,255,255,.85),0 0 34px rgba(240,203,0,.38)}
  100%{border-left-color:var(--luz);box-shadow:10px 10px 26px rgba(120,100,80,.12),-8px -8px 20px rgba(255,255,255,.85),0 0 0 rgba(240,203,0,0)}
}

@media (prefers-reduced-motion:reduce){
  #pagina .sm-capacidades.percurso > li,#pagina .sm-capacidades.percurso.ri-entrou > li{animation:none!important;filter:none!important;opacity:1!important;
    background-size:100% 3px,100% 3px!important}
  .pv-linha-tempo::after,.pv-agulha,.pv-marca,.pv-respira-luz span{animation:none!important}
  .pv-pal,.pv-modulo,.pv-grifo{animation:none!important}
}

/* ---------------------------------------------- 4 · Como funciona, em linha do tempo */
.pv-linha-tempo{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);margin-top:clamp(34px,4vw,52px);padding-top:72px;
}
.pv-linha-tempo::before{
  content:"";position:absolute;left:0;right:0;top:28px;height:2px;
  background:linear-gradient(90deg,var(--luz) 0%,var(--areia) 100%);
}
.pv-linha-tempo::after{
  content:"";position:absolute;top:24px;left:0;width:10px;height:10px;background:var(--marcador);box-shadow:var(--marcador-halo);
  animation:pv-corre 7s ease-in-out infinite;
}
@keyframes pv-corre{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.pv-no{position:relative}
.pv-marca{
  position:absolute;top:-72px;left:0;width:56px;height:56px;display:grid;place-items:center;
  background:var(--marfim);border:1.5px solid var(--luz);
  box-shadow:0 0 0 0 rgba(240,203,0,0);animation:pv-caixa 4.2s ease-in-out infinite;
}
.pv-no:nth-child(2) .pv-marca{animation-delay:1.4s}.pv-no:nth-child(3) .pv-marca{animation-delay:2.8s}
@keyframes pv-caixa{0%,60%,100%{box-shadow:0 0 0 0 rgba(240,203,0,0)}25%{box-shadow:0 0 22px 2px rgba(240,203,0,.45)}}
.pv-marca i{font-style:normal;font-weight:600;font-size:17px;letter-spacing:.06em;color:var(--tinta)}
.pv-no p{margin:0;font-size:15.5px;line-height:1.7;color:var(--tinta-suave);max-width:34ch}
.pv-notas-duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,44px);margin-top:clamp(28px,3vw,40px)}
.pv-notas-duas 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}

/* ---------------------------------------------- 5 · O que a parceria entrega, em módulos */
.pv-modulos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:26px}
.pv-modulo{
  position:relative;padding:clamp(24px,2.6vw,36px);min-height:190px;
  background:linear-gradient(145deg,#fff,var(--gelo));
  box-shadow:10px 10px 26px rgba(120,100,80,.12),-8px -8px 20px rgba(255,255,255,.85);
  border-left:3px solid transparent;transition:transform .5s ease,border-color .5s ease,box-shadow .5s ease;
}
.pv-modulo:hover{transform:translateY(-4px);border-left-color:var(--luz);box-shadow:14px 16px 32px rgba(120,100,80,.16),-8px -8px 20px rgba(255,255,255,.9),0 0 22px rgba(240,203,0,.22)}
.pv-modulo::after{content:"";position:absolute;top:22px;right:22px;width:7px;height:7px;background:var(--marcador);box-shadow:var(--marcador-halo)}
.pv-mod-n{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid var(--taupe);font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--tinta);margin-bottom:16px;transition:border-color .5s,box-shadow .5s}
.pv-modulo:hover .pv-mod-n,.pv-modulos.pv-entrou .pv-mod-n{border-color:var(--luz)}
.pv-modulo .conduz-retrato{width:64px;margin:0 0 14px;border-radius:50%}
.pv-mod-t{margin:0 0 8px;font-size:clamp(17px,1.5vw,20px);font-weight:600;color:var(--tinta);letter-spacing:-.01em}
.pv-modulo p{margin:0;font-size:15.5px;line-height:1.65;color:var(--tinta-suave)}
@media (max-width:760px){.pv-modulos,.pv-notas-duas{grid-template-columns:1fr}.pv-linha-tempo{grid-template-columns:1fr;padding-top:0}.pv-linha-tempo::before,.pv-linha-tempo::after{display:none}.pv-marca{position:static;margin-bottom:12px}}

/* ----------------------------- 6 · Ansiedade, stress e autossabotagem: o mostrador */
.pv-estado{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:start}
.pv-estado-esq .destaque{margin:0 0 clamp(20px,2.4vw,32px);max-width:30ch}
.pv-dial{display:block;width:min(100%,360px);height:auto}
.pv-arco{fill:none;stroke:var(--areia);stroke-width:2}
.pv-ticks line{stroke:var(--taupe);stroke-width:1.4}
.pv-agulha{stroke:var(--tinta);stroke-width:2.2;stroke-linecap:square;transform-box:view-box;transform-origin:110px 110px;animation:pv-agulha 9s ease-in-out infinite}
.pv-pivo{fill:var(--luz)}
@keyframes pv-agulha{
  0%{transform:rotate(64deg)} 6%{transform:rotate(50deg)} 11%{transform:rotate(60deg)} 17%{transform:rotate(44deg)} 23%{transform:rotate(52deg)}
  38%{transform:rotate(22deg)} 50%{transform:rotate(30deg)} 66%{transform:rotate(6deg)} 76%{transform:rotate(0deg)} 100%{transform:rotate(0deg)}
}
.pv-estado-dir p{margin:0 0 20px;max-width:56ch}
.pv-dois-passos{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:0;position:relative}
.pv-dois-passos li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px 0;border-top:1px solid var(--linho);font-weight:600;color:var(--tinta);font-size:17px}
.pv-dois-passos li:last-child{border-bottom:1px solid var(--linho)}
.pv-n{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--taupe);font-weight:600;font-size:16px;line-height:1;letter-spacing:.06em;color:var(--tinta)}
@media (max-width:820px){.pv-estado{grid-template-columns:1fr}}

/* Bem-dita Fala! de teste: a capa com a foto real dos cartões, com a palavra inteira à mostra */
#pagina .capa-fala picture img{object-position:50% 60%}