/* Página Treinamentos (creative-ti.com/treinamentos).
   Cópia fiel das janelas do ConvertBox que a página antiga (www.creative-ti.inf.br/treinamentos) mostra: a tela
   cheia "Valores e Datas", a faixa do topo, o botão do WhatsApp no canto e as janelas de cada curso.
   As medidas (larguras, espaços, tamanhos de letra e de botão) são as do ConvertBox, medidas na página antiga. */

/* Os mesmos pesos que valem na página antiga: o ConvertBox carrega só o normal (fonts.bunny.net, família sem pesos), mas
   o Wix carrega também o Montserrat negrito, e o navegador junta os dois (nome de família não diferencia maiúsculas).
   Por isso: Montserrat com negrito de verdade; Roboto e Open Sans com o negrito que o navegador desenha a partir do
   normal. (Medido na página antiga: largura dos títulos em negrito igual.) */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/roboto-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/open-sans-latin-400-normal.woff2) format('woff2'); }

html, body { margin: 0; padding: 0; background: #000; }
body.tr { min-height: 100vh; color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.3; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.tr *, .tr *::before, .tr *::after { box-sizing: border-box; }
.tr button { font: inherit; }
.tr img { border: 0; }

.ff-roboto { font-family: Roboto, sans-serif; font-weight: 400; }
.ff-montserrat { font-family: Montserrat, sans-serif; font-weight: 400; }
.ff-open-sans { font-family: 'Open Sans', sans-serif; font-weight: 400; }

/* ------------------------------------------------------------------ peças comuns das janelas */
.tr-cx { position: relative; text-align: left; }
.tr-cx > .tr-ip { position: relative; z-index: 2; }
.tr-in { position: relative; z-index: 2; }
.tr-sc::before, .tr-sc::after { content: ""; display: table; width: 100%; height: 0; }
.tr-ot { position: relative; }
.tr-col { position: relative; background-repeat: no-repeat; }
.tr-drag { position: relative; z-index: 3; min-height: 100%; height: 100%; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; }

/* entrada e saída: o ConvertBox faz um "fade" de 0,4 s; a janela do meio ainda cresce de 80% a 100% em 0,3 s */
.tr-anima { opacity: 0; transition: opacity .4s ease; }
.tr-anima.tr-visivel { opacity: 1; }
.tr-fundo .tr-janela { opacity: 0; transform: scale(.8); transition: opacity .3s ease, transform .3s ease; }
.tr-fundo.tr-visivel .tr-janela { opacity: 1; transform: none; }

/* o X de fechar (o desenho é o do ConvertBox: ícone na cor escolhida para cada passo) */
.tr-x { position: absolute; z-index: 10; top: 10px; right: 10px; display: block; margin: 0; padding: 0; border: 0; background: none; color: #bbc4c7; font-size: 14px; line-height: 1; cursor: pointer; }
.tr-x svg { display: block; width: 1em; height: 1em; }
.tr-x:focus { outline: none; }
.tr-x:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* ------------------------------------------------------------------ elementos */
.tr-el + .tr-el { margin-top: 10px; }
.tr-w { position: relative; }

/* texto */
.tr-tx .tr-in2 { text-align: center; word-wrap: break-word; overflow-wrap: break-word; }
.tr-tx .tr-in2 * { color: inherit; }
.tr-tx .tr-in2 b, .tr-tx .tr-in2 strong { font-family: inherit; font-weight: 700; }
.tr-tx .tr-in2 i, .tr-tx .tr-in2 em { font-family: inherit; font-style: italic; }
.tr-tx .tr-in2 p { margin: 0; }

/* imagem */
.tr-im { text-align: center; line-height: 1; }
.tr-im .tr-w::after { content: ""; display: table; width: 100%; height: 0; clear: both; }
.tr-im .tr-in2 { margin: auto; max-width: 100%; }
.tr-im .tr-in2 img { display: block; max-width: none; width: 100%; height: auto; }
.tr-im.fw .tr-in2 { width: 100% !important; max-width: none !important; }
.tr-im.al-left .tr-in2 { float: left; }
.tr-im.al-right .tr-in2 { float: right; }

/* vídeo (YouTube) */
.tr-vd .tr-in2 { position: relative; z-index: 1; margin: 0 auto; max-width: 100%; background: #000; }
.tr-vd .tr-in2::before { content: ""; display: block; padding: 0 0 56.25%; }
.tr-vd .tr-in2 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
.tr-vd .tr-in2.tr-prop::before { padding-bottom: var(--tr-prop, 56.25%); }
.tr-vd.fw .tr-in2 { width: 100% !important; }

/* botões */
.tr-bt .tr-bin { margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.tr-bt.wd-slim .tr-bin { max-width: 180px; }
.tr-bt.wd-regular .tr-bin { max-width: 300px; }
.tr-bt.wd-wide .tr-bin { max-width: 520px; }
.tr-bt .tr-it-img .tr-bin { max-width: 100% !important; }
.tr-bt .tr-lay { display: flex; flex-wrap: nowrap; margin-left: -7px; margin-right: -7px; }
.tr-bt .tr-lay > .tr-it { flex: 1; margin: 0 7px; width: 0; }
.tr-bt .tr-b { display: flex; width: 100%; align-items: center; justify-content: center; margin: 0; text-decoration: none; word-wrap: break-word; overflow-wrap: break-word; background: #1395ec; color: #fff; border: none; border-radius: 0; text-align: center; line-height: 1.3; font-size: 15px; padding: 10px 10px 9px; transition: box-shadow .1s ease; cursor: pointer; -webkit-user-select: none; user-select: none; font-family: inherit; }
.tr-bt .tr-b * { color: inherit; }
.tr-bt .tr-b:hover { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.tr-bt .tr-b:active > span { transform: translateY(1px); }
.tr-bt .tr-b > span { display: block; width: 100%; white-space: normal; }
.tr-bt .tr-b b, .tr-bt .tr-b strong { font-family: inherit; font-weight: 700; }
.tr-bt .tr-b i { font-style: italic; }
.tr-bt.sz-s .tr-b { font-size: 14px; padding: 8px 12px; }
.tr-bt.sz-m .tr-b { font-size: 15px; padding: 10px 12px; }
.tr-bt.sz-l .tr-b { font-size: 16px; padding: 12px; }
.tr-bt.sz-xl .tr-b { font-size: 18px; padding: 14px; }
.tr-bt.sh-square .tr-b { border-radius: 0; }
.tr-bt.sh-rounded .tr-b { border-radius: 5px; }
.tr-bt.sh-round .tr-b { border-radius: 25px; }
.tr-bt .tr-bimg { display: flex; align-items: center; width: 100%; max-width: 100%; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; }
.tr-bt .tr-bimg img { display: block; width: 100%; height: auto; cursor: pointer; }
.tr-bt .tr-b:focus, .tr-bt .tr-bimg:focus { outline: none; }
.tr-bt .tr-b:focus-visible, .tr-bt .tr-bimg:focus-visible { outline: 2px solid #76b7d5; outline-offset: 2px; }

/* estrelas que abrem o formulário de avaliação (Zoho) */
.tr-zs { text-align: center; font: 14px/17px Arial, Helvetica, sans-serif; }
.tr-zs a { color: rgb(0, 0, 238); text-decoration: none; }

/* formulário ("Receber Áudio no WhatsApp") */
.tr-fm .tr-fin { max-width: 520px; margin: 0 auto; }
.tr-fm .tr-g { margin-bottom: 12px; }
.tr-fm .tr-g:last-child { margin-bottom: 0; }
.tr-fm.sz-l .tr-g { margin-bottom: 14px; }
.tr-fm.sz-xl .tr-g { margin-bottom: 16px; }
.tr-fm .tr-g:last-child { margin-bottom: 0; }
.tr-fm input { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; margin: 0; background: #fff; border-radius: 4px; border: none; box-shadow: 0 0 0 1px rgba(47, 69, 103, .22); font-family: Roboto, Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: 16px; padding: 11px 15px; height: 38px; color: #5e727b; outline: none; }
.tr-fm input::placeholder { font-weight: 400; color: #8998ab; opacity: 1; }
.tr-fm input:focus { box-shadow: 0 0 0 1px rgba(47, 69, 103, .55); }
.tr-fm input.erro { box-shadow: 0 0 0 1px #f27c66; background-color: #fff5f5; }
.tr-fm input.erro::placeholder { color: #fd1414; }
.tr-fm.sz-s input { font-size: 14px; line-height: 15px; padding: 6px 12px; height: 34px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
.tr-fm.sz-m input { font-size: 15px; line-height: 16px; padding: 10px 14px; height: 38px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
.tr-fm.sz-l input { font-size: 16px; line-height: 18px; padding: 12px 14px; height: 44px; }
.tr-fm.sz-xl input { font-size: 18px; line-height: 20px; padding: 15px; height: 50px; }
.tr-fm .tr-fbtn { display: block; width: 100%; margin: 0; background: #38a4ee; color: #fff; border-radius: 5px; font-size: 15px; line-height: 1.3; padding: 11px 15px; text-align: center; border: none; outline: none; cursor: pointer; word-wrap: break-word; transition: box-shadow .1s ease, opacity .2s ease; font-family: inherit; }
.tr-fm .tr-fbtn:hover { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.tr-fm .tr-fbtn:active > span { transform: translateY(1px); }
.tr-fm .tr-fbtn > span { display: block; width: 100%; }
.tr-fm .tr-fbtn b, .tr-fm .tr-fbtn strong { font-family: inherit; font-weight: 700; }
.tr-fm .tr-fbtn[disabled] { opacity: .7; cursor: progress; }
.tr-fm .tr-fbtn:focus-visible { outline: 2px solid #76b7d5; outline-offset: 2px; }
.tr-fm.sz-s .tr-fbtn { font-size: 14px; padding: 8px 12px; }
.tr-fm.sz-m .tr-fbtn { font-size: 15px; padding: 10px 12px; }
.tr-fm.sz-l .tr-fbtn { font-size: 16px; padding: 12px; }
.tr-fm.sz-xl .tr-fbtn { font-size: 18px; padding: 14px; }
.tr-fm.sh-square .tr-fbtn, .tr-fm.sh-square input { border-radius: 0; }
.tr-fm.sh-rounded .tr-fbtn, .tr-fm.sh-rounded input { border-radius: 5px; }
.tr-fm.sh-round .tr-fbtn, .tr-fm.sh-round input { border-radius: 25px; }
.tr-fm.sh-round.sz-s input { padding: 6px 12px; }
.tr-fm.sh-round.sz-m input { padding: 10px 16px; }
.tr-fm.sh-round.sz-l input { padding: 12px 18px; }
.tr-fm.sh-round.sz-xl input { padding: 15px 22px; }

/* ------------------------------------------------------------------ tela cheia ("Valores e Datas") */
.tr-tela { position: fixed; z-index: 100005; top: 0; left: 0; width: 100%; height: 100%; }
.tr-tela > .tr-ip { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; }
.tr-tela .tr-in { width: 100%; max-height: 100%; padding: 50px 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tr-tela .tr-sc { padding: 15px; }
.tr-tela .tr-ot { margin: 0 auto; max-width: 750px; }
.tr-tela.duas .tr-ot { max-width: 900px; }
.tr-tela .tr-col { padding: 30px; }
.tr-tela.duas .tr-col { min-height: 1px; }
.tr-tela .tr-x { font-size: 18px; top: 20px; right: 20px; }
.tr-tela.rola .tr-x { right: 35px; }

/* ------------------------------------------------------------------ janela no meio da tela (cada curso etc.) */
.tr-fundo { position: fixed; z-index: 100003; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 36, 76, .6); display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tr-fundo > .tr-linha { width: 100%; padding: 60px 0; margin: auto 0; }
.tr-janela { width: 600px; max-width: calc(100% - 40px); margin: 0 auto; border-radius: 10px; box-shadow: 0 4px 25px 0 rgba(47, 69, 103, .35); }
.tr-janela.duas { width: 800px; }
.tr-janela > .tr-ip, .tr-janela .tr-col { border-radius: 10px; }
.tr-janela .tr-col { padding: 40px; }
.tr-janela.duas .tr-col { padding: 30px; min-height: 1px; }
/* vídeo e imagem "largura total" encostam nas bordas da janela; o primeiro encosta também no alto */
.tr-janela .tr-vd.fw .tr-w, .tr-janela .tr-im.fw .tr-w { margin-left: -40px; margin-right: -40px; }
.tr-janela.duas .tr-vd.fw .tr-w, .tr-janela.duas .tr-im.fw .tr-w { margin-left: -30px; margin-right: -30px; }
.tr-janela .tr-el.prim.fw .tr-w { margin-top: -40px; }
.tr-janela.duas .tr-el.prim.fw .tr-w { margin-top: -30px; }
.tr-janela .tr-el.prim.fw .tr-in2, .tr-janela .tr-el.prim.fw img { border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; }

/* ------------------------------------------------------------------ faixa do topo */
.tr-faixa { position: fixed; z-index: 100002; left: 0; top: 0; width: 100%; max-height: 100%; box-shadow: 0 0 5px rgba(47, 69, 103, .2); display: flex; flex-wrap: nowrap; }
.tr-faixa > .tr-ip { flex: auto; display: flex; flex-direction: column; justify-content: center; max-width: 100%; }
.tr-faixa .tr-in { width: 100%; max-height: 100%; padding: 0; overflow-x: hidden; overflow-y: auto; }
.tr-faixa .tr-sc { padding: 0 20px; min-height: 32px; }
.tr-faixa .tr-row { margin: 0 auto; max-width: 1000px; }
.tr-faixa.duas .tr-row { max-width: 1100px; }
.tr-faixa .tr-col { padding: 10px; }
body.tr.com-faixa { padding-top: var(--tr-faixa, 0px); }

/* ------------------------------------------------------------------ painel do canto (botão do WhatsApp) */
.tr-canto { position: fixed; z-index: 100001; display: inline-flex; flex-wrap: nowrap; max-height: calc(100% - 40px); bottom: 20px; right: 20px; }
.tr-canto.pos-bottom-left { right: auto; left: 20px; }
.tr-canto > .tr-ip { display: flex; flex-direction: column; width: 300px; max-height: 100%; border-radius: 10px; box-shadow: 0 4px 15px 0 rgba(29, 60, 111, .25); transform-origin: right bottom; animation: tr-cresce .4s cubic-bezier(.175, .885, .32, 1.275); }
.tr-canto.pos-bottom-left > .tr-ip { transform-origin: left bottom; }
.tr-canto .tr-in { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; border-radius: 10px; }
.tr-canto .tr-col { padding: 15px; border-radius: 10px; }
.tr-canto .tr-vd.fw .tr-w, .tr-canto .tr-im.fw .tr-w { margin-left: -15px; margin-right: -15px; }
.tr-canto .tr-el.prim.fw .tr-w { margin-top: -15px; }
.tr-canto .tr-el.prim.fw .tr-in2, .tr-canto .tr-el.prim.fw img { border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; }
.tr-canto .tr-x { z-index: 11; display: flex; align-items: center; justify-content: center; top: 0; right: 0; width: 22px; height: 22px; margin-top: -11px; margin-right: -11px; background: #fff; border-radius: 50%; color: #62729d !important; box-shadow: 0 1px 3px 0 rgba(29, 60, 111, .25); }
.tr-canto .tr-x svg { width: 8px; height: 8px; }
@keyframes tr-cresce { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* a bolinha do WhatsApp (o "teaser" do ConvertBox) */
.tr-teaser { position: fixed; z-index: 100004; right: 20px; bottom: 20px; height: 74px; border-radius: 74px; cursor: pointer; animation: tr-sobe .5s; -webkit-tap-highlight-color: transparent; }
.tr-teaser.pos-left { right: auto; left: 20px; }
.tr-teaser .tr-tw { display: block; padding: 0; border-radius: 74px; }
.tr-teaser.pulso .tr-tw { animation: tr-pulso 3s infinite; }
.tr-teaser .tr-tin { display: flex; flex-wrap: nowrap; align-items: center; position: relative; border-radius: 74px; padding: 3px; box-shadow: 0 4px 15px 0 rgba(29, 60, 111, .25); }
.tr-teaser .tr-tic { width: 68px; height: 68px; }
.tr-teaser .tr-tic img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.tr-teaser .tr-tmsg { padding: 0 16px 0 8px; font-size: 14px; line-height: 1.3; }
.tr-teaser:focus { outline: none; }
.tr-teaser:focus-visible .tr-tin { outline: 2px solid #76b7d5; outline-offset: 2px; }
@keyframes tr-pulso { 0% { box-shadow: 0 0 0 0 rgba(0, 117, 246, .7); } 70% { box-shadow: 0 0 0 15px rgba(0, 117, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 117, 246, 0); } }
@keyframes tr-sobe { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translateZ(0); } }

/* ------------------------------------------------------------------ duas colunas (computador) */
body.tr:not(.movel) .tr-cx.duas .tr-row { display: flex; flex-wrap: nowrap; }
body.tr:not(.movel) .tr-cx.duas .tr-col { flex: auto; width: 50%; }
body.tr:not(.movel) .tr-cx.duas.lado-left .tr-col:first-child { width: 40%; }
body.tr:not(.movel) .tr-cx.duas.lado-left .tr-col:last-child { width: 60%; }
body.tr:not(.movel) .tr-cx.duas.lado-right .tr-col:first-child { width: 60%; }
body.tr:not(.movel) .tr-cx.duas.lado-right .tr-col:last-child { width: 40%; }

/* ------------------------------------------------------------------ celular (o ConvertBox troca abaixo de 600 px) */
body.tr.movel .tr-bt .tr-lay { display: block; margin: 0; }
body.tr.movel .tr-bt .tr-lay > .tr-it { width: auto; margin: 0; }
body.tr.movel .tr-bt .tr-lay > .tr-it + .tr-it { margin-top: 10px; }
body.tr.movel .tr-tela .tr-col { padding: 15px; }
body.tr.movel .tr-tela .tr-x { font-size: 16px; top: 12px; right: 12px; }
body.tr.movel .tr-tela.rola .tr-x { right: 27px; }
body.tr.movel .tr-janela .tr-col { padding: 20px; }
body.tr.movel .tr-janela .tr-vd.fw .tr-w, body.tr.movel .tr-janela .tr-im.fw .tr-w { margin-left: -20px; margin-right: -20px; }
body.tr.movel .tr-janela .tr-el.prim.fw .tr-w { margin-top: -20px; }
body.tr.movel .tr-janela.duas .tr-col:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.tr.movel .tr-janela.duas .tr-col:last-child { border-top-left-radius: 0; border-top-right-radius: 0; }
body.tr.movel .tr-faixa { flex-direction: column; }
body.tr.movel .tr-canto { width: 100%; max-width: calc(100% - 40px); }
body.tr.movel .tr-canto > .tr-ip { width: inherit; flex: auto; }
body.tr.movel .tr-fm .tr-g-lin { display: block; }

/* sem JavaScript */
.tr-sem-js { max-width: 640px; margin: 0 auto; padding: 48px 20px; font: 15px/1.5 Roboto, Arial, sans-serif; color: #e6e9ee; }
.tr-sem-js h1 { font: 700 22px/1.2 Montserrat, Arial, sans-serif; margin: 0 0 12px; }
.tr-sem-js a { color: #9fd3ec; }
.tr-sem-js ul { padding-left: 18px; }

@media (prefers-reduced-motion: reduce) {
  .tr-anima, .tr-teaser, .tr-canto > .tr-ip, .tr-teaser.pulso .tr-tw { transition: none !important; animation: none !important; }
}