/* Cantos (Pedro, 06/11: "revisar todas as bordas do site para não ter borda arredondada e ter borda 45°"). Vem por último: todo
   retângulo com canto redondo leva o chanfro a 45°; o que é redondo de verdade (orb, bolinhas de voz, play redondo, fechar) continua
   redondo. O clip-path corta contorno, sombra de fora e o anel de foco, então o foco vira um anel por dentro. */
:root{
  --c4:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px);
  --c6: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);
  --c8: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);
  --c10: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);
  --c12: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);
  --c16:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
}

/* popups (lista e contato), campos, chips e o aviso */
.lista{border-radius:0;clip-path:var(--c16)}
.lista input[type="email"],.lista input[type="text"],.lista input[type="tel"],.lista textarea,.lista select{border-radius:0;clip-path:var(--c8)}
/* campo de texto em foco: só o fundo muda, sem anel (o chanfro cortava o anel e ficava uma borda branca quebrada; Pedro, 09/11) */
.lista input:focus,.lista textarea:focus,.lista select:focus{outline:0;box-shadow:none}
.interesses label{border-radius:0;clip-path:var(--c8)}
.interesses label:has(input:focus-visible){outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
.aviso{border-radius:0;clip-path:var(--c10)}

/* controles em pílula que viram chanfro */
.lab__seg,.cf__voz,.cf__modos,.alterna,.seletor,.pular,.intro__pular,.amostra__tocar,.codigo__selo,.plano__tag,.tags span{border-radius:0;clip-path:var(--c8)}
.lab__seg button,.cf__modos button,.alterna button{border-radius:0;clip-path:var(--c6)}
.nav-vidro__cta,.topo__entrar{border-radius:0;clip-path:var(--c10)}
.tecla,.campo-mini div,.estudio__icones i,.noite__lista button,.voz-cartao{border-radius:0;clip-path:var(--c4)}

/* blocos */
.cartao,.plano,.api,.passos li{border-radius:0;clip-path:var(--c12)}
.codigo,.estudio{border-radius:0;clip-path:var(--c10)}
.heroi[data-destaque=pilula] .legenda .w.agora{border-radius:0}
.roda:focus-visible .roda__item.sel .roda__nome,.intro__lista:focus-visible .intro__item.sel .roda__nome{border-radius:0}

/* o anel de foco dos botões chanfrados fica por dentro (o de fora seria cortado) */
.btn:focus-visible,.demo__play:focus-visible,.ex__seta:focus-visible,.topo__entrar:focus-visible,
.demo__item button:focus-visible,.lab__play:focus-visible,.conversa:focus-visible,.nav-vidro__item:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--focus)}

/* contato de empresa: a mensagem é um campo grande; o pote de mel (anti-robô) fica fora da tela */
.lista textarea{width:100%;min-height:112px;padding:12px 18px;border:0;background:var(--surface-100);color:var(--ink);font:400 16px/1.45 var(--font-sans);resize:vertical}
.contato__pote{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.contato__nota{font-size:12.5px!important;line-height:18px!important;color:var(--faint)!important}
.calc__link{padding:0;border:0;background:none;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* sem eyebrow (Pedro, 06/11: "tem eyebrow demais no site, pode tirar todos"): os rótulos que sobraram viram texto normal, e o
   que estava centralizado vai pra esquerda como o resto do site */
.demo__rotulo,.lab__titulo{font:500 14px/1.3 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ink-soft)}

/* menos espaço vertical (Pedro, 06/11: "essa margem vertical e as outras podem ser menores") */
.secao > .trilho{padding-block:72px}
@media (max-width:760px){.secao > .trilho{padding-block:48px}}
.ent > .trilho{padding-bottom:72px}
/* a Demo sobe até 32 px da base da bandeira; o branco que sobrava embaixo do herói fica atrás dela */
.heroi[data-v=encaixe]{margin-bottom:calc(-1 * max(0px, 50svh - var(--Hr) / 2 - 32px))}
#demo{position:relative;z-index:2;background:var(--paper)}

/* link pra fora abre em outra aba e leva a setinha diagonal, sem sublinhado nela (Pedro, 06/11) */
.seta-fora{display:inline-block;margin-left:.2em;text-decoration:none}

/* popup escuro (Pedro, 08/11: "esse form pode ser mais bonito, as fontes estão de tamanho diferente… deixar o fundo dele escuro").
   A lista e o contato invertem: fundo da moldura, texto claro, um tamanho só de letra (15/22) pra campo, chip, legenda e botão. */
.lista{width:min(520px,calc(100vw - 32px));padding:32px;background:var(--moldura);color:#FAF9F5;box-shadow:none;--lp:rgba(250,249,245,.62);--lf:rgba(250,249,245,.4);--lc:rgba(250,249,245,.08);--lh:rgba(250,249,245,.13)}
.lista::backdrop{background:rgba(20,19,17,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lista h2,#lista-obrigado h2{padding-right:44px;font:var(--fw-display) 32px/36px var(--font-display);letter-spacing:var(--ls-display);color:#FAF9F5}
.lista p,.lista legend,.lista input,.lista textarea,.interesses label,.lista .btn{font-family:var(--font-sans);font-size:15px;line-height:22px}
.lista p{margin-top:10px;color:var(--lp)}
.lista__campos{gap:10px;margin-top:24px}
.lista input[type="email"],.lista input[type="text"],.lista textarea{height:46px;padding:0 16px;background:var(--lc);color:#FAF9F5;caret-color:#FAF9F5}
.lista textarea{height:auto;min-height:120px;padding:12px 16px}
.lista input::placeholder,.lista textarea::placeholder{color:var(--lf)}
.lista input:focus,.lista textarea:focus{background:var(--lh)}
.lista input:-webkit-autofill{-webkit-text-fill-color:#FAF9F5;-webkit-box-shadow:0 0 0 1000px #2a2927 inset}
.interesses{gap:8px;margin-top:26px}
.interesses legend{margin-bottom:10px;color:var(--lp)}
.interesses legend span{color:var(--lf)}
.interesses label{height:36px;padding:0 14px;background:var(--lc);color:rgba(250,249,245,.88)}
.interesses label:hover{background:var(--lh)}
.interesses label:has(input:checked){background:#FAF9F5;color:var(--moldura)}
.interesses label:has(input:focus-visible){box-shadow:inset 0 0 0 1.5px rgba(250,249,245,.7)}
.lista__outro{height:40px!important;margin-top:2px}
.lista .lista__msg{margin-top:16px;color:#F2928A}
.lista__acoes{margin-top:28px}
/* botão sobre fundo escuro (popup e faixa do beta): cinza escuro, não branco (Pedro, 08/11) */
.lista .btn--preto,.btn--grafite{background:#3A3733;color:#FAF9F5}
.lista .btn--preto:hover,.btn--grafite:hover{background:#4A4641}
.btn--grafite{box-shadow:none}
.lista .btn:focus-visible{box-shadow:inset 0 0 0 2px var(--moldura),inset 0 0 0 3.5px #FAF9F5}
.fechar{top:20px;right:20px;width:36px;height:36px;background:var(--lc);color:#FAF9F5}
.fechar:hover{background:var(--lh)}
.contato__nota{margin-top:14px;color:var(--lf)!important}
@media (max-width:760px){.lista{padding:24px}.lista input,.lista textarea{font-size:16px}}

/* o grid (Pedro, 08/11: "meio triângulo em todos… um cinza um pouquinho mais claro… as linhas tão com cores diferentes, padroniza pra
   versão mais clara; o losango da bandeira também destoa das linhas do grid"). Um fio só pra tudo: trilhos, retas e losango/círculo da
   bandeira, chamada e preços, na cor opaca do hairline (opaca pra não escurecer onde duas linhas se cruzam). Onde uma linha encontra o
   trilho, um meio triângulo de 4×7 com a base no trilho, apontando pra dentro, um tom acima do fio. */
:root{--fio:#E7E5E0;--no:#D3CEC6;
}
.trilho{border-inline-color:var(--fio)}
@media (max-width:1210px){.trilho{border-inline-color:transparent}}
.topo .trilho{border-inline-color:transparent}
#pesquisa[data-posts=secao] .trilho{border-inline-color:rgba(250,249,245,.06)}
.heroi[data-v=encaixe] .bandeira,.heroi[data-v=encaixe] .bandeira__los,.heroi[data-v=encaixe] .bandeira__circ{stroke:var(--fio)}
.chamada{border-color:var(--fio)}
.precos{border-color:var(--fio)}
.preco{border-top-color:var(--fio)}
.preco + .preco{border-left-color:var(--fio)}
.secao--linha{border-top-color:var(--fio)}

/* os meio triângulos: na bandeira do herói, no .secao--linha e no topo dos preços e embaixo dos preços e da chamada */
.heroi[data-v=encaixe] .bandeira__pontos i,.secao--linha > .trilho::before,.secao--linha > .trilho::after,.precos::before,.precos::after{width:4px;height:7px;margin-top:-1px;border-radius:0;background:var(--no)}
.heroi[data-v=encaixe] .bandeira__pontos i:nth-child(odd),.secao--linha > .trilho::before,.precos::before{left:-1px;clip-path:polygon(0 0,100% 50%,0 100%)}
.heroi[data-v=encaixe] .bandeira__pontos i:nth-child(even),.secao--linha > .trilho::after,.precos::after{right:-1px;clip-path:polygon(100% 0,0 50%,100% 100%)}
.precos::before,.precos::after{left:auto;top:11px;margin-top:0}
.precos::before{left:0}
.precos::after{right:0}
@media (min-width:1211px){
  .precos > .preco:first-child::after,.precos > .preco:last-child::after{content:"";position:absolute;bottom:-4px;width:4px;height:7px;background:var(--no);z-index:1}
  .precos > .preco:first-child::after{left:0;clip-path:polygon(0 0,100% 50%,0 100%)}
  .precos > .preco:last-child::after{right:0;clip-path:polygon(100% 0,0 50%,100% 100%)}
  .chamada .trilho::before,.chamada .trilho::after{content:"";position:absolute;bottom:-4px;width:4px;height:7px;background:var(--no)}
  .chamada .trilho::before{left:0;clip-path:polygon(0 0,100% 50%,0 100%)}
  .chamada .trilho::after{right:0;clip-path:polygon(100% 0,0 50%,100% 100%)}
}
/* dois padrões (Pedro, 08/11): onde a linha atravessa o trilho de fora a fora (cruz), o losango inteiro (7×7, centrado no trilho);
   onde ela só chega no trilho por dentro (T: as retas da bandeira, cortadas no trilho, e os preços), o meio triângulo.
   Cruzes: a linha de baixo da chamada e o .secao--linha, que vão de ponta a ponta da página. */
.secao--linha > .trilho::before,.secao--linha > .trilho::after,.chamada .trilho::before,.chamada .trilho::after{width:7px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)!important}
.secao--linha > .trilho::before,.chamada .trilho::before{left:-4px}
.secao--linha > .trilho::after,.chamada .trilho::after{right:-4px}