/* Falas: play/pause do herói, legenda palavra por palavra e as posições dela na bandeira (data-legenda) e o destaque (data-destaque) */

/* play só no fim, com a bandeira se formando; pause discreto enquanto fala */
.pilula-play .i-pausa{display:none}
.pilula-play.on .i-play{display:none}
.pilula-play.on .i-pausa{display:block;margin-left:0}
.heroi[data-v=encaixe] .pilula-play{opacity:0;pointer-events:none;transition:opacity .7s ease,transform .3s cubic-bezier(.22,1,.36,1),background-color .3s}
.heroi[data-v=encaixe].pronto .pilula-play{opacity:.8;pointer-events:auto}
.heroi[data-v=encaixe].pronto.falando .pilula-play{opacity:.45}
.heroi[data-v=encaixe].pronto.falando .pilula-play:hover{opacity:.95}
.heroi.pronto .heroi__arte .orb-casca{cursor:pointer}

/* legenda */
.legenda{position:absolute;left:50%;top:min(calc(50svh + var(--Hr) / 2 + 22px),calc(100svh - 150px));transform:translateX(-50%);width:min(var(--Wr),88vw);text-align:center;
  opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:2}
.heroi.legendando .legenda{opacity:1}
.legenda__quem{display:inline-flex;align-items:center;gap:7px;font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legenda__quem .mini{width:10px;height:10px}
.legenda__txt{margin:10px 0 0;font:var(--fw-display) 20px/1.38 var(--font-display);letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.legenda .w,.legenda-arco .w{transition:color .2s,background-color .2s,opacity .2s,fill .2s}

/* posições */
.heroi[data-legenda=topo] .legenda{top:calc(50svh - var(--Hr) / 2 - 26px);transform:translate(-50%,-100%)}
.heroi[data-legenda=topo] .legenda__txt{font-size:24px}
.heroi[data-legenda=losango] .legenda{top:calc(50svh + var(--Hr) * .4393);transform:translate(-50%,-50%);width:calc(var(--Wr) * .46)}
.heroi[data-legenda=losango] .legenda__quem{display:none}
.heroi[data-legenda=losango] .legenda__txt{margin:0;font-size:15px}
/* canto: linha única no meio do espaço entre o vértice de baixo do losango e a base do retângulo (y = 7 + (12,3 a 14)/2 de 14 → .4393 da altura), até a metade da bandeira */
.heroi[data-legenda=canto] .legenda{left:calc(50% - var(--Wr) / 2 + 24px);top:calc(50svh + var(--Hr) * .4393);transform:translateY(-50%);width:calc(var(--Wr) / 2 - 24px);text-align:left}
.heroi[data-legenda=canto] .legenda__quem{display:none}
.heroi[data-legenda=canto] .legenda__txt{margin:0;font-size:22px;line-height:1.3;white-space:nowrap;text-wrap:nowrap;overflow:hidden}
.legenda .w.oculta{display:none}
.heroi[data-legenda=losango] .legenda .fora{display:none}
.heroi[data-legenda=faixa] .legenda{display:none}

/* faixa: o arco branco atravessando o orb, como a faixa da bandeira */
.legenda-arco{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .6s ease}
.heroi[data-legenda=faixa].legendando .legenda-arco{opacity:1}
.legenda-arco path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:7.5}
.legenda-arco text{font:600 3.4px/1 var(--font-sans);letter-spacing:.38px;text-transform:uppercase;fill:#1c1917}

/* palavra da vez */
.heroi[data-destaque=tinta] .legenda .w{color:var(--faint)}
.heroi[data-destaque=tinta] .legenda .w.dito,.heroi[data-destaque=tinta] .legenda .w.agora{color:var(--ink)}
.heroi[data-destaque=pilula] .legenda .w{color:var(--ink-soft)}
.heroi[data-destaque=pilula] .legenda .w.agora{color:#fff;background:var(--ink);border-radius:6px;box-shadow:0 0 0 .14em var(--ink)}
.heroi[data-destaque=sublinhado] .legenda .w{color:var(--muted)}
.heroi[data-destaque=sublinhado] .legenda .w.dito{color:var(--ink-soft)}
.heroi[data-destaque=sublinhado] .legenda .w.agora{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.heroi[data-destaque=uma] .legenda .w{display:none}
.heroi[data-destaque=uma] .legenda .w.agora{display:inline;font-size:1.4em}
.legenda-arco .w{fill:rgba(28,25,23,.32)}
.legenda-arco .w.dito,.legenda-arco .w.agora{fill:#1c1917}
.heroi[data-destaque=pilula] .legenda-arco .w.agora,.heroi[data-destaque=sublinhado] .legenda-arco .w.agora{fill:var(--blue)}

/* cartão de fala: texto todo na tela; tocando, o dito em tinta e o resto claro */
/* sem caixa (Pedro, 06/11: "não tem por que ter essa caixinha branca"): o texto fica na página e a barra de controles abaixo de um fio */
.cf{position:relative;display:flex;flex-direction:column;gap:14px;text-align:left}
.cf__texto{font:400 17px/1.62 var(--font-sans);color:var(--ink);max-height:360px;overflow:auto;scrollbar-width:thin}
.cf__linha{margin:0 0 10px}
.cf__linha:last-child{margin:0}
.cf__bola{border:0;background:none;padding:0;margin:0 8px 0 0;vertical-align:-3px;cursor:pointer;line-height:0}
.cf__bola .mini{width:16px;height:16px;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.cf__bola:hover .mini{transform:scale(1.15)}
.cf.tocando .cf__linha.on .cf__bola .mini{transform:scale(1.3);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
/* card de uma frase só: a bolinha da voz já está na barra (Pedro, 06/11: "aqui tá redundante") */
.cf__linha:only-child .cf__bola{display:none}
.cf .w{transition:color .2s}
.cf.tocando .w{color:var(--faint)}
.cf.tocando .w.dito,.cf.tocando .w.agora{color:var(--ink)}
.w__v,.w__f{display:none}
.cf[data-modo=falado] .w__e,.cf[data-modo=ipa] .w__e{display:none}
.cf[data-modo=falado] .w__v,.cf[data-modo=ipa] .w__f{display:inline}
.cf[data-modo=escrito] .w--num .w__e{text-decoration:underline dotted;text-decoration-color:var(--faint);text-underline-offset:4px}
.cf[data-modo=falado] .w--num .w__v{color:var(--blue)}
.cf[data-modo=ipa] .cf__texto{font-family:"Inter","Charis SIL","Gentium Plus","Lucida Grande",sans-serif;letter-spacing:.01em}
.cf[data-modo=ipa] .w--rio-sp .w__f{color:var(--blue)}
.cf.tocando[data-modo=ipa] .w--rio-sp:not(.dito):not(.agora) .w__f{color:rgba(30,51,134,.35)}
.cf__barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--hairline)}
.cf__voz{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 8px;border:0;border-radius:999px;background:none;color:var(--ink);font:500 14px/1 var(--font-sans);cursor:pointer}
.cf__voz:hover:not(:disabled){background:var(--surface-200)}
.cf__voz:disabled{cursor:default}
.cf__voz:disabled svg{display:none}
.cf__voz .mini{width:16px;height:16px}
.cf__voz svg{width:12px;height:12px;color:var(--muted)}
.cf__modos{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-200)}
.cf__modos button{height:28px;padding:0 11px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 12.5px/1 var(--font-sans);cursor:pointer}
.cf__modos button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.cf__play{margin-left:auto;height:38px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 14px/1 var(--font-sans);cursor:pointer;transition:background-color .2s}
.cf__play:hover{background:var(--ink-hover)}
.cf--curto{max-width:560px;margin:28px auto 0}

/* grade: orb que fala à esquerda, cartão à direita */
.fala-grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;margin-top:48px}
.palco{width:100%;max-width:400px;justify-self:center;cursor:pointer}
.dupla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:48px;align-items:stretch}
.cf--ditado{justify-content:space-between;background:var(--surface-100)}
@media (max-width:860px){.fala-grade,.dupla{grid-template-columns:1fr;gap:24px}.palco{max-width:260px}}

/* demo */
.demo{margin-top:48px;max-width:780px}
.demo__texto{width:100%;min-height:96px;border:0;resize:vertical;background:none;color:var(--ink);font:400 19px/1.55 var(--font-sans);outline:none}
.demo__vozes{display:flex;gap:4px;flex-wrap:wrap}
.demo__vozes button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 8px;border:1px solid transparent;border-radius:999px;background:none;color:var(--muted);font:500 13.5px/1 var(--font-sans);cursor:pointer}
.demo__vozes button .mini{width:16px;height:16px}
.demo__vozes button[aria-pressed=true]{border-color:var(--hairline);background:var(--surface-100);color:var(--ink)}
.demo__exemplos{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.demo__exemplos button{max-width:100%;height:32px;padding:0 13px;border:1px solid var(--hairline);border-radius:999px;background:none;color:var(--ink-soft);font:400 13px/1 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.demo__exemplos button:hover{background:var(--surface-200)}

/* pesquisa */
.frentes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:88px}
.frente{border-top:1px solid var(--hairline);padding-top:18px}
.frente h3,.passos h3{margin:0 0 8px;font:var(--fw-display) 22px/1.2 var(--font-display);letter-spacing:var(--ls-display)}
.frente p,.passos p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.tags span{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:var(--surface-200);color:var(--ink-soft);font:500 12.5px/1 var(--font-sans)}
.tags span.breve{background:none;border:1px dashed var(--hairline);color:var(--faint)}
.passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:56px 0 0;list-style:none}
.passos li{padding:18px;border-radius:16px;background:var(--surface-100);box-shadow:var(--edge)}
.passos b{display:block;margin-bottom:24px;font:500 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--faint)}
.centro{display:flex;justify-content:center;margin-top:48px}
#numeros .cf{margin-top:20px}
#numeros > .trilho > .tags{margin-top:36px}
@media (max-width:900px){.frentes,.passos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.frentes,.passos{grid-template-columns:1fr}}
.sublinhado{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* barra de baixo no vidro da Unflat/BORA: quase transparente, sem borda, itens largos, texto em peso 600; some no rodapé */
.nav-vidro{padding:4px;border:0;border-radius:28px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(20px) saturate(180%) brightness(1.08);backdrop-filter:blur(20px) saturate(180%) brightness(1.08);
  box-shadow:0 2px 20px rgba(0,0,0,.08),inset 0 .5px 0 rgba(255,255,255,.2);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.nav-vidro.some{transform:translateX(-50%) translateY(185%);opacity:0;pointer-events:none}
.nav-vidro__item{height:48px;padding:0 26px;font:var(--fw-display) 18px/1 var(--font-display);letter-spacing:var(--ls-display)}
.nav-vidro__cta{height:48px;padding:0 22px;font-weight:600;border-radius:24px}
/* a marca é uma só no site todo: a bolinha a .86 do tamanho do nome (o topo: 24 px pra 28 px) */
.nav-vidro__marca{gap:9px;height:48px;padding:0 18px 0 10px;font:var(--fw-display) 26px/1 var(--font-display);letter-spacing:var(--ls-display)}
.nav-vidro__marca .mini,.marca .mini{width:.86em;height:.86em}
.marca{gap:9px}
@media (max-width:760px){.nav-vidro__item{padding:0 12px}}
/* a barra também com o canto a 45° (Pedro, 06/11); o clip-path corta a sombra de fora, então o contorno vem de dentro */
.nav-vidro{border-radius:0;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),inset 0 .5px 0 rgba(255,255,255,.3)}
.nav-vidro__item::before{border-radius:0;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}

/* e-mail do rodapé: copia ao clicar */
.email-link-container{position:relative;display:inline-block;margin-top:14px}
.email-link{font:500 15px/1 var(--font-sans);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.copy-success-tag{position:absolute;left:50%;bottom:100%;padding:6px 12px;border-radius:0;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);background:var(--blue);color:#fff;font:500 13px/1 var(--font-sans);white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,0) rotate(0);transition:opacity .3s ease-in-out,transform .3s ease-in-out}
.copy-success-tag.show{opacity:1;transform:translate(-30%,-30%) rotate(-3deg)}
.rodape .email-link-container{display:block;width:max-content}
/* no rodapé, o "email copiado" em creme, bem em cima do e-mail (Pedro, 09/11) */
.rodape .copy-success-tag{top:50%;bottom:auto;background:#E6E1D7;color:var(--ink);transform:translate(-50%,-50%) rotate(0)}
.rodape .copy-success-tag.show{transform:translate(-50%,-50%) rotate(-3deg)}

/* o orb do herói passa por cima do grid (Pedro, 06/11: "esse recorte lateral eu estou achando feio… pode deixar o orb extrapolar
   esse grid"): o trilho não corta mais, a seção corta só na largura da tela; as linhas da bandeira continuam terminando no grid */
.heroi[data-v=encaixe]{overflow:clip}
.heroi[data-v=encaixe] .trilho{overflow:visible}
.heroi[data-v=encaixe] .bandeira{clip-path:inset(calc(var(--Hr) / 2 - 50svh) calc((var(--Wr) - min(1178px, 100vw) + 2px) / 2))}

/* celular: metade da bandeira é estreita demais pra legenda; vai a largura dela toda */
@media (max-width:760px){
  .heroi[data-legenda=canto] .legenda{left:calc(50% - var(--Wr) / 2 + 16px);width:calc(var(--Wr) - 32px)}
  .heroi[data-legenda=canto] .legenda__txt{font-size:18px}
}
/* o "Fale com o Lero" some no rodapé junto com a barra */
.conversa{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.conversa.some{opacity:0;transform:translateY(40px);pointer-events:none}

/* saída rápida da legenda quando a fala acaba ou pausa; a entrada continua suave */
.legenda,.legenda-arco{transition:opacity .25s ease}
.heroi.legendando .legenda,.heroi[data-legenda=faixa].legendando .legenda-arco{transition:opacity .5s ease}

/* canto a 45° também nos botões de ação (Pedro, 06/11) */
.cf__play{border-radius:0;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}

/* vídeo do LeroLero: largo, com o chanfro do sistema */
.video-lerolero{display:block;width:100%;aspect-ratio:16/9;margin-top:40px;object-fit:cover;background:#1C1917;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}

/* todos os botões com o canto a 45° (Pedro, 06/11: "muda todos os botões pra borda 45 graus"); os redondos (play de vidro do herói,
   bolinhas das vozes) ficam redondos. O contorno do .btn--fio vira fundo, porque o recorte come a borda nos cantos */
.btn,.cf__play,.demo__play,.lab__play,.conversa,.cf__modos button,.lab__seg button{border-radius:0;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.cf__modos button,.lab__seg button{clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
.cf__modos,.lab__seg{border-radius:0;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
.btn--fio{border:0 !important;box-shadow:none !important;background:var(--surface-200) !important;color:var(--ink) !important}
.btn--fio:hover{background:#D9D4CB !important}
.conversa{box-shadow:none;background:#fff}

/* topo da folha com o canto a 45° em vez do raio (Pedro, 06/11): dois triângulos na cor da moldura cobrem os cantos */
.folha{border-radius:0}
.folha::before,.folha::after{content:"";position:absolute;top:0;z-index:1;width:14px;height:14px;background:var(--moldura);pointer-events:none}
.folha::before{left:0;clip-path:polygon(0 0,100% 0,0 100%)}
.folha::after{right:0;clip-path:polygon(0 0,100% 0,100% 100%)}