/* O que diz quem já passou pelo método · bloco da página do Self Mentoring (08/10/2026).
   A solução mais simples, nas palavras da Cinara: um botão com o nome da pessoa,
   todos do mesmo tamanho e no mesmo nível, sem nenhum acima de outro. A pele é a do
   método: creme, areia, taupe e espresso, com o cobre só no traço.
   09/10: numa única linha centralizada, "como se fosse parte da figura", com a fonte
   um pouco menor e só o play ao lado do nome (Cinara no grupo, 08/10, 21h47 a 21h50). */
.smv{--smv-creme:#FDFCFA;--smv-areia:#DED4CA;--smv-areia-2:#BCAC9D;--smv-taupe:#93806F;--smv-terra:#5B4837;--smv-esp:#281E15;--smv-cobre:#B07A52;--smv-cobre-claro:#E1A983;--smv-cobre-fundo:#7A5436}
.smv-chamada{margin:0 0 22px;max-width:56ch;color:var(--smv-terra);text-wrap:pretty}

.smv-nomes{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px}
.smv-bt{position:relative;display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;padding:10px 14px 12px 10px;background:var(--smv-creme);border:1px solid var(--smv-areia);border-radius:0;
  cursor:pointer;text-align:left;font:inherit;color:var(--smv-esp);transition:border-color .3s ease,background .3s ease}
.smv-ic{flex:none;width:32px;height:32px;display:grid;place-items:center;border:1.2px solid var(--smv-esp);background:#fff;transition:background .25s ease}
.smv-ic svg{width:13px;height:13px;fill:var(--smv-esp);transition:fill .25s ease}
.smv-ic .ic-pausa{display:none}
.smv-bt[aria-pressed="true"] .ic-play{display:none}
.smv-bt[aria-pressed="true"] .ic-pausa{display:inline}
.smv-bt-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.smv-bt-n{font-family:"Didot","Playfair Display",Georgia,serif;font-size:16px;line-height:1.2;white-space:nowrap}
.smv-bt-p{font-size:9.5px;font-weight:600;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--smv-taupe);white-space:nowrap}
.smv-bt-barra{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.smv-bt-barra span{display:block;height:100%;width:0;background:var(--smv-cobre);transition:width .25s linear}
.smv-bt:hover{border-color:var(--smv-cobre-claro)}
.smv-bt:hover .smv-ic{background:var(--smv-esp)}.smv-bt:hover .smv-ic svg{fill:#fff}
.smv-bt:focus-visible{outline:2px solid var(--smv-cobre);outline-offset:3px}
.smv-bt.ouvida{background:#F6EDE4}
.smv-bt[aria-pressed="true"]{border-color:var(--smv-cobre);background:#F6EDE4}
.smv-bt[aria-pressed="true"] .smv-ic{background:var(--smv-esp)}.smv-bt[aria-pressed="true"] .smv-ic svg{fill:#fff}

/* abaixo de 900px as três continuam numa linha, do mesmo tamanho e no mesmo
   nível, com o play em cima do nome para o nome não ser cortado */
@media (max-width:900px){
  .smv-nomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .smv-bt{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 10px 12px}
  .smv-bt-n,.smv-bt-p{white-space:normal;text-wrap:balance}
  .smv-bt-n{font-size:15px}
  .smv-bt-p{font-size:9px;letter-spacing:.1em}
}
@media (max-width:380px){
  .smv-bt{padding:9px 8px 11px}
  .smv-ic{width:28px;height:28px}
  .smv-bt-n{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.smv-bt-barra span,.smv-bt,.smv-ic,.smv-ic svg{transition:none}}

/* 09/10, 14h06: a Cinara pediu a linha dos áudios alinhada à esquerda, como o padrão
   da página (o título e a chamada já começam na margem esquerda). */

/* 09/10, 14h08: a frase debaixo dos três círculos numa única linha, sem quebra, e
   centralizada com a imagem, como parte dela. A fonte diminui com a tela para caber
   inteira; no celular, onde uma linha só ficaria ilegível, ela segue centralizada. */
.corpo-pagina .sm-bloco > p.destaque[data-ed="e06.sm-tres"]{
  max-width:none;margin-left:auto;margin-right:auto;text-align:center;
  white-space:nowrap;font-size:clamp(13px,1.32vw,18px);letter-spacing:-.01em}
@media (max-width:860px){
  .corpo-pagina .sm-bloco > p.destaque[data-ed="e06.sm-tres"]{white-space:normal;text-wrap:balance;font-size:15px}
}