/* =====================================================================
   AS IDEIAS QUE A CINARA APROVOU NO PAINEL DE SUGESTÕES · 06/10/2026
   Na página de entregas (entregascinara-2909, Sugestões) ela marcou
   "Quero no site". Às 19h16 do mesmo dia, no grupo: "pode usar assim, lá,
   já estava aprovado no painel" e "tinha outros efeitos aprovados no painel
   que ainda não foram aplicados". Este arquivo leva para o site o desenho
   que ela viu e aprovou, sem trocar nenhuma palavra dela.
   ===================================================================== */

/* ------------------------------------------------------------------
   1 · O texto corrido vira caixas (Em todas as páginas, 06/10 18h20)
   As listas das páginas internas saem da coluna e viram caixas com um
   ponto de luz, que entram uma a uma. O texto é o mesmo.
   ------------------------------------------------------------------ */
#pagina .corpo-pagina .sinais-empresa{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  gap:12px;max-width:none;padding:0;border-left:0;
}
#pagina .corpo-pagina .sm-bloco-foto .sinais-empresa{grid-template-columns:1fr}
#pagina .corpo-pagina .sinais-empresa li{
  padding:18px 18px 18px 46px;background:#fff;
  border:1px solid var(--linho);border-radius:2px;line-height:1.5;
  box-shadow:0 1px 0 rgba(23,17,15,.03);
}
#pagina .corpo-pagina .sinais-empresa li + li{border-top:1px solid var(--linho)}
#pagina .corpo-pagina .sinais-empresa li::before{
  left:18px;top:25px;width:8px;height:8px;border:0;border-radius:0;transform:none;
  background:var(--marcador,radial-gradient(circle at 50% 45%,#FFF6C8 0%,var(--luz) 62%));
  box-shadow:var(--marcador-halo,0 0 0 1px rgba(240,203,0,.35),0 0 8px 1px rgba(240,203,0,.55));
}
/* a margem de cor e a luz que descia por ela eram da coluna; as caixas não têm margem */
#pagina .corpo-pagina .sinais-empresa::after{display:none!important}
#pagina .corpo-pagina .sinais-empresa.ri-espera:not(.ri-entrou) > li{opacity:0;transform:translateY(12px)}
#pagina .corpo-pagina .sinais-empresa.ri-entrou > li{
  animation:ap-caixa .8s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--i,0) * 140ms) 1 both;
}
@keyframes ap-caixa{
  0%{opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:none}
}

/* ------------------------------------------------------------------
   2 · As três capacidades se encontram (Self Mentoring, aprovada 30/09)
   O desenho do painel, como ela mandou o print às 19h16: o círculo de
   cima em luz amarela, os dois de baixo em rosado e areia, o nome em
   destaque com a frase logo abaixo, e o Self Mentoring numa etiqueta
   branca de fio amarelo no encontro dos três.
   ------------------------------------------------------------------ */
.venn-luz{width:min(100%,520px)}
.venn-c{
  justify-content:center;padding:0 9%;box-shadow:none;
  font-size:clamp(11.5px,1.4vw,14px);line-height:1.35;color:var(--tinta-suave,#5B4837);text-align:center;
}
.venn-c b{
  max-width:none;margin-bottom:4px;
  font-size:clamp(13px,1.7vw,17px);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--tinta);
}
.venn-c > span{display:block}
.venn-c.a{justify-content:flex-start;padding-top:12%;background:rgba(240,203,0,.30)}
.venn-c.b{justify-content:flex-end;padding:0 22% 16% 9%;background:rgba(206,182,167,.38)}
.venn-c.g{justify-content:flex-end;padding:0 9% 16% 22%;background:rgba(176,159,141,.28)}
.venn-luz .venn-meio{border-color:var(--luz);padding:6px 8px}
@media (max-width:560px){
  .venn-c{font-size:10.5px;padding:0 7%}
  .venn-c b{font-size:12.5px}
  .venn-c.a{padding-top:11%}
  .venn-c.b{padding:0 20% 15% 6%}
  .venn-c.g{padding:0 6% 15% 20%}
  .venn-luz .venn-meio{font-size:9px;letter-spacing:.16em}
}

/* ------------------------------------------------------------------
   3 · A bússola que se calibra (Self Mentoring, 06/10 18h21)
   Ao lado de "O que fica com você": a agulha oscila, procura e assenta.
   ------------------------------------------------------------------ */
.sm-com-bussola{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,18vw,220px);column-gap:clamp(24px,4vw,56px);align-items:center}
.sm-com-bussola > .cabeca,.sm-com-bussola > .destaque{grid-column:1 / -1}
.sm-com-bussola > .sinais-empresa{grid-column:1;grid-row:2}
#pagina .corpo-pagina .sm-com-bussola > .sinais-empresa{grid-template-columns:1fr}
.bussola-luz{grid-column:2;grid-row:2;margin:0;width:100%;aspect-ratio:1}
.bussola-luz svg{display:block;width:100%;height:auto;overflow:visible}
.bussola-luz .aro{fill:#fff;stroke:var(--linho);stroke-width:1.5}
.bussola-luz .aro.fino{fill:none;stroke:rgba(176,122,82,.35);stroke-dasharray:2 5}
.bussola-luz .marcas path{stroke:var(--terra,#93806F);stroke-width:2;stroke-linecap:round}
.bussola-luz .card{font:600 13px/1 "Inter",sans-serif;letter-spacing:.12em;fill:var(--tinta);text-anchor:middle}
.bussola-luz .norte{fill:var(--luz)}
.bussola-luz .sul{fill:#CEB6A7}
.bussola-luz .eixo{fill:var(--tinta)}
.bussola-luz .agulha{transform-origin:100px 100px;transform:rotate(-38deg)}
.bussola-luz.acesa .agulha{animation:ap-calibra 3.2s cubic-bezier(.3,.6,.3,1) .2s 1 both}
.bussola-luz.acesa svg{filter:drop-shadow(0 0 18px rgba(240,203,0,.28))}
@keyframes ap-calibra{
  0%{transform:rotate(-38deg)}
  22%{transform:rotate(32deg)}
  42%{transform:rotate(-18deg)}
  60%{transform:rotate(10deg)}
  76%{transform:rotate(-4deg)}
  88%{transform:rotate(1.5deg)}
  100%{transform:rotate(0deg)}
}
@media (max-width:760px){
  .sm-com-bussola{grid-template-columns:1fr}
  .bussola-luz{grid-column:1;grid-row:2;width:150px;margin:6px auto 18px}
  .sm-com-bussola > .sinais-empresa{grid-row:3}
}

@media (prefers-reduced-motion:reduce){
  #pagina .corpo-pagina .sinais-empresa.ri-espera:not(.ri-entrou) > li{opacity:1;transform:none}
  #pagina .corpo-pagina .sinais-empresa.ri-entrou > li{animation:none}
  .bussola-luz .agulha,.bussola-luz.acesa .agulha{animation:none;transform:none}
}

/* ------------------------------------------------------------------
   1b · As duas listas que ficaram de fora das caixas (auditoria 07/10)
   "O que a casa oferece, e o que pede" (Suas Vivências) e "O que a
   parceria entrega" (Para Empresas), no mesmo desenho das outras.
   ------------------------------------------------------------------ */
#pagina .condicoes ul,#pagina ul.entrega{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  gap:12px;list-style:none;margin:0;padding:0;
}
#pagina .condicoes li,#pagina ul.entrega > li{
  position:relative;padding:18px 18px 18px 46px;background:#fff;
  border:1px solid var(--linho);border-radius:2px;line-height:1.5;
}
#pagina .condicoes li::before,#pagina ul.entrega > li::before{
  content:"";position:absolute;left:18px;top:25px;width:8px;height:8px;border:0;border-radius:0;transform:none;
  background:var(--marcador,radial-gradient(circle at 50% 45%,#FFF6C8 0%,var(--luz) 62%));
  box-shadow:var(--marcador-halo,0 0 0 1px rgba(240,203,0,.35),0 0 8px 1px rgba(240,203,0,.55));
}