/*
 * DFEPainel — adaptação do modelo Shipo (docs/21).
 *
 * Os arquivos do modelo (style.css, responsive.css, bootstrap, fontawesome) vêm sem
 * alteração; tudo o que muda está aqui, carregado por último.
 *
 * 1. Fontes do modelo (Poppins e Rubik), servidas pelo próprio site, subconjunto latino.
 * 2. A cor de destaque do tema três (verde rgb(0, 215, 126)) passa a ser a do
 *    aplicativo, #5156be — site e aplicativo precisam parecer o mesmo produto.
 */

/* 1. Fontes ---------------------------------------------------------------- */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontes/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fontes/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fontes/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontes/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fontes/poppins-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('fontes/rubik-300-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-style: italic; font-weight: 400; font-display: swap; src: url('fontes/rubik-italico-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 2. A cor principal ------------------------------------------------------- */

.hero-saas-wrap { background-image: url('dfepainel/hero-fundo.png'); }
.page-banner-wrap { background-image: url('dfepainel/banner-fundo.jpg'); }
.get-ready-wrap::before { background-image: url('dfepainel/chamada-fundo.png'); }

.theme_three #scrollUp { background-color: #5156be; }
.theme_three .is-sticky #sticky-nav { background: #5156be; }
.theme_three .btn_subscribe { color: #5156be; }
.theme_three .btn_subscribe:hover,
.theme_three .is-sticky #sticky-nav .btn_subscribe:hover { background: #4145a8; color: #fff; }

a.sass_btn { background-color: #5156be; box-shadow: 0 8px 10px 0 rgba(81, 86, 190, 0.35); }
a.sass_btn:hover { background-color: #4145a8; color: #fff; }
a.play_video_btn i { color: #5156be; }

.s_icon { border-color: #5156be; background-color: #eef0ff; color: #5156be; }
.software-featured-list ul li i { background: #eef0ff; color: #5156be; }

.price-three .plan-price p { color: #5156be; }
.price-three .single-plan a { background-color: #5156be; box-shadow: 0 8px 16px 0 rgba(81, 86, 190, 0.48); }

.footer-three-wrap .footer-menu a:hover,
.single-widgets-three ul a:hover { color: #5156be; }

.error-inner h1 { color: #5156be; }

@media only screen and (max-width: 991px) {
    .theme_three #sticky-nav { background: #5156be; }
}

/* 3. A marca ------------------------------------------------------------------ */

.marca-dfepainel { display: inline-flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 24px; line-height: 1; color: #fff; }
.marca-dfepainel__icone { width: 30px; height: 30px; flex: none; }
.home-one-menu a.navbar-brand { color: #fff; }
.footer-logo .marca-dfepainel { color: #5156be; }

/* 4. Botões e chamadas ----------------------------------------------------------- */

.sass_btn i, .play_video_btn i { margin-right: 8px; }
.chamada-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
.chamada-botoes .sass_btn { margin: 0; }
a.sass_btn.sass_btn--claro { background-color: #fff; color: #5156be; box-shadow: 0 8px 10px 0 rgba(81, 86, 190, 0.18); }
a.sass_btn.sass_btn--claro:hover { background-color: #eef0ff; color: #4145a8; }
.plano-sob-consulta { margin-top: 40px; padding: 30px; border-radius: 5px; background: #eef0ff; }
.plano-sob-consulta p { color: #1d274e; font-size: 18px; margin-bottom: 18px; }

/* 5. Ícones das funcionalidades: Font Awesome no lugar das imagens do modelo ------- */

.s_icon_box i { font-size: 40px; color: #5156be; line-height: 105px; }
.f-icon--fa { width: 80px; height: 80px; border-radius: 50%; background: #5156be; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 10px 20px rgba(81, 86, 190, 0.35); }

/* 6. Contato ---------------------------------------------------------------------- */

.contato-orientacao { color: #63688e; font-size: 17px; margin: 0 0 40px; }
.contato-privacidade { color: #63688e; font-size: 15px; margin: 40px 0 0; }
.canal-de-contato { text-align: center; height: 100%; }
.canal-de-contato .s_icon { margin: 0 auto 25px; }
.canal-de-contato address { color: #63688e; font-style: normal; line-height: 1.8; margin: 0; }
.canal-de-contato .sass_btn { margin-top: 10px; }

/* 7. Rodapé ----------------------------------------------------------------------- */

.rodape-fornecedor { color: #63688e; font-style: normal; line-height: 1.8; margin: 0; }

/* 8. Limitações, condições e textos legais ------------------------------------------ */

.limitacoes, .condicoes-da-oferta { background: #f6faff; }
.lista-limitacoes, .lista-condicoes { margin: 30px 0 0; padding-left: 22px; }
.lista-limitacoes li, .lista-condicoes li { color: #1d274e; font-size: 17px; line-height: 1.7; margin-bottom: 12px; }
.texto-legal h2 { font-size: 26px; color: #1d274e; margin: 40px 0 15px; }
.texto-legal h3 { font-size: 20px; color: #1d274e; margin: 30px 0 10px; }
.texto-legal p, .texto-legal li { color: #63688e; font-size: 16px; line-height: 1.8; }
.texto-legal ul { padding-left: 22px; margin-bottom: 20px; }
.texto-legal__vigencia { font-style: italic; }
.aviso-de-minuta { background: #ffbf53; color: #1d274e; text-align: center; font-weight: 600; padding: 10px 15px; }

/* 9. Telas do painel ---------------------------------------------------------------- */

.software-sreenshot img { max-width: 100%; height: auto; }
.shipo-soft-screenshot img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 25px 50px rgba(29, 39, 78, 0.18); }

/* 10. Acessibilidade ---------------------------------------------------------------- */

a:focus-visible, button:focus-visible { outline: 3px solid #ffbf53; outline-offset: 2px; }

/* 11. Legibilidade: a cor de destaque passou a ser a mesma do fundo da abertura ------ */

/* O modelo só dá texto branco ao botão dentro da abertura; fora dela, herdava o azul de link. */
a.sass_btn, a.sass_btn:focus { color: #fff; }

/* Na abertura, o botão da cor principal sumiria sobre o fundo da mesma cor. */
.saas-hero-content a.sass_btn { background-color: #fff; color: #5156be; box-shadow: 0 8px 16px 0 rgba(29, 39, 78, 0.18); }
.saas-hero-content a.sass_btn:hover { background-color: #eef0ff; color: #4145a8; }

/* O título do site é mais longo que o do modelo: um pouco menor, para caber na metade
 * esquerda. A partir de 992px a coluna do texto tem metade da largura (col-lg-6, na view):
 * a imagem do notebook fica por cima, na metade direita, e o texto não pode passar por
 * baixo dela. */
@media only screen and (min-width: 992px) {
    .saas-hero-content h1 { font-size: 46px; line-height: 1.25; }
}

/* Em tela estreita a abertura passa da onda do fundo, e o texto branco cairia no branco.
 * E a coluna do texto ocupa a largura: a imagem ficaria por cima dele, então sai — como o
 * modelo já faz abaixo de 576px. */
@media only screen and (max-width: 991px) {
    .hero-saas-wrap { background-color: #5156be; }
    .software-sreenshot { display: none; }
}

/* "Ver as funcionalidades" é mais longo que o link do modelo: quando não cabe ao lado do
 * botão, desce inteiro, em vez de partir no meio. */
.saas-hero-content a.play_video_btn { white-space: nowrap; }

/* Entre o celular (32px, do modelo) e o desktop: o título de 55px não caberia na coluna. */
@media only screen and (min-width: 576px) and (max-width: 991px) {
    .saas-hero-content h1 { font-size: 40px; line-height: 1.3; }
}

/* 12. Português: sem a caixa alta de cada palavra, que o modelo aplica em inglês -------- */

.page-banner-wrap, .breadcrumb-wrap { text-transform: none; }
.plan-buy-btn { text-transform: none; }

/* O rótulo acima dos títulos vinha na cor do tema um. */
.section-title-one span { color: #5156be; }

/* No cartão de contato, o botão cabe em duas linhas em vez de cortar o texto. */
.canal-de-contato a.sass_btn { height: auto; line-height: 1.4; padding: 15px 25px; margin-right: 0; white-space: normal; }