/*
Theme Name: Jusfy Lite
Description: Tema mínimo que substitui o Theme Builder do Elementor Pro na reconstrução local — renderiza posts, arquivos, busca e 404 com os templates de header/footer da biblioteca do Elementor.
Version: 1.0
Author: Reconstrução local
*/

/* button, input, select e textarea não herdam a fonte do documento: sem isto o
   navegador aplica a própria (Arial), e o manual de marca só prevê Poppins e Noto
   Sans. Pega as abas dos planos, as setas dos carrosséis e o X dos popups —
   inclusive os que o JavaScript cria depois. Fica aqui, e não no CSS por página
   dos builders, porque este arquivo carrega tanto no Canvas quanto no tema. */
button, input, select, textarea { font-family: inherit; }

/* Ícone da etiqueta "NOVIDADE" no card do app, no rodapé. É um SVG do Font
   Awesome sem largura própria: o controle de tamanho do Elementor não gera regra
   para ele, então dentro do card de 280px ele esticava para 198×317px e virava um
   telefone gigante verde, com um vazio enorme ao lado das colunas de links.
   O original usa 16px (.jusfy-app-badge svg). */
.jfooter .elementor-icon-list-icon svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Menu móvel e popup promocional.

   Os dois moram DENTRO do template de rodapé, que aparece em todas as páginas —
   inclusive nas do blog, que são renderizadas pelo tema e não pelo Elementor.
   O CSS deles ficava no sec_styles(), que é gravado dentro de cada página do
   Elementor e portanto nunca chegava ao blog: lá os dois caíam no fluxo normal
   (o menu com 581px de altura e largura total, o promo com 286px) e empurravam
   ~870px de espaço vazio depois do rodapé em todo post.

   Por isso vivem aqui: este arquivo carrega no Canvas e no tema.
   --------------------------------------------------------------------------- */

/* A classe vem repetida de propósito nas duas regras abaixo. O Elementor aplica
   `.e-con{position:var(--position)}` no seu custom-frontend.min.css, que carrega
   DEPOIS deste arquivo; com um seletor de uma classe só, empatava na
   especificidade e o Elementor vencia por ordem. Repetir a classe dobra a
   especificidade e resolve sem precisar de !important. */

/* Hambúrguer do header (SVG da marca, 3ª barra mais curta) */
.jham { display: inline-flex; align-items: center; color: #212121; }
.jham svg { width: 26px; height: auto; }
.jham:hover { color: #41C78F; }

/* Conteúdo do menu móvel: Entrar + lista + sanfona de Soluções (details/summary,
   como o n-accordion do popup 10143 do original).
   Os seletores de link carregam classe dupla de propósito: o kit do Elementor
   colore todo <a> (.elementor-kit-N a) e uma classe sozinha perde para ele —
   foi assim que o menu subiu com links verdes, inline e espremidos a 122px. */
.jmenu-movel .elementor-widget-html { width: 100%; }
.jmm { display: flex; flex-direction: column; width: 100%; }
/* Entrar discreto: ícone + texto em caps, sem caixa (visual do popup original) */
a.jmm-entrar.jmm-entrar { display: inline-flex; align-items: center; gap: 7px;
  font: 700 12px/1 Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #FFFFFF; text-decoration: none; }
a.jmm-entrar.jmm-entrar svg { width: 14px; height: 14px; }
a.jmm-entrar.jmm-entrar:hover { color: #41C78F; }
/* itens pequenos e limpos, sem filetes (como no original) */
.jmm a.jmm-item, .jmm summary { font: 500 15px/1.4 Poppins, sans-serif; color: #FAFAFA; text-decoration: none;
  padding: 9px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.jmm a.jmm-item:hover, .jmm summary:hover { color: #41C78F; }
.jmm summary { list-style: none; }
.jmm summary::-webkit-details-marker { display: none; }
/* chevron aponta para a direita fechado e desce ao abrir */
.jmm summary svg { width: 14px; height: 14px; flex-shrink: 0; transform: rotate(-90deg); transition: transform .3s ease; }
.jmm .jmm-on > summary svg { transform: rotate(0deg); }
/* A sanfona: os details ficam sempre [open]; quem revela é a classe .jmm-on,
   animando grid-template-rows 0fr -> 1fr — o conteúdo desce como um carretel
   desenrolando, em vez do salto seco do details nativo. */
/* grid-template-columns 100% trava a coluna na largura do painel: a implícita
   ("auto") dimensiona pelo conteúdo. Não era a causa da "quebra" (essa era o
   flex-wrap do painel, ver abaixo), mas segura o grid no lugar. */
.jmm .jmm-anim { display: grid; grid-template-rows: 0fr; grid-template-columns: 100%;
  transition: grid-template-rows .38s ease; }
.jmm .jmm-on > .jmm-anim { grid-template-rows: 1fr; }
.jmm .jmm-anim > div { overflow: hidden; min-height: 0; min-width: 0; max-width: 100%; }
.jmm details { width: 100%; max-width: 100%; box-sizing: border-box; }
/* grupos internos: recuo e tipografia menor.
   O recuo é padding, nunca margin: o details tem width:100% + box-sizing:border-box,
   então margin-left jogava o grupo 10px para fora da caixa .jmm-anim>div, que é
   overflow:hidden — comia a seta do grupo e sobrava só um pontinho na borda.
   Com padding o recuo cabe dentro dos 100% e a esquerda fica no mesmo lugar. */
.jmm .jmm-sub { padding-left: 10px; }
.jmm .jmm-sub summary { font-size: 14px; color: rgba(250, 250, 250, .92); }
.jmm .jmm-sub ul { list-style: none; margin: 0; padding: 2px 0 6px 12px; }
.jmm .jmm-sub ul a { display: block; font: 400 13.5px/1.5 Poppins, sans-serif; color: rgba(250, 250, 250, .72);
  text-decoration: none; padding: 6px 0; }
.jmm .jmm-sub ul a:hover { color: #41C78F; }

/* Gaveta lateral: fica fora da tela até o link #jmenu-movel abri-la. */
.jmenu-movel.jmenu-movel { position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: min(640px, 100%); height: 100vh;
  /* acima do popup promocional (1200): menu aberto é navegação ativa do usuário,
     e o promo abria por cima dele 1,5s depois, cobrindo os itens */
  z-index: 1300;
  /* coluna SEM wrap: com a sanfona aberta o conteúdo passa da altura da tela e,
     com wrap, o bloco de navegação pulava para uma 2ª coluna fora do painel —
     era a "quebra" ao abrir Cálculos Jurídicos e Mais Eficiência. O excesso
     rola no overflow-y, que é o comportamento certo. */
  flex-wrap: nowrap;
  transform: translateX(102%); transition: transform .45s ease;
  /* fechada, some de vez: sem isto a sombra de 30px vazava pela borda direita em toda pagina (e esticava a altura medida do site para 16000px) */
  visibility: hidden;
  transition: transform .45s ease, visibility 0s .45s;
  overflow-y: auto; box-shadow: -10px 0 30px rgba(0, 0, 0, .3); }
.jmenu-movel.jmenu-movel > .elementor-element { flex-shrink: 0; width: 100%; }
.jmenu-movel.jmenu-movel:target,
.jmenu-movel.jmenu-movel.jmm-aberto { transform: none; visibility: visible; transition: transform .45s ease, visibility 0s 0s; }

/* Cartão promocional flutuante. Sem overlay escuro: a página continua visível e
   clicável atrás — daí o pointer-events só no cartão. */
.jpromo.jpromo { position: fixed; inset: 0; z-index: 1200; display: none !important;
  align-items: center !important; justify-content: flex-end !important;
  background: none; padding: 0 !important; pointer-events: none; }
.jpromo.jpromo-ativo { display: flex !important; }
/* Popup de cupom por estado REMOVIDO: a produção atual não o tem (sobra do rebuild).
   Mantido no DOM p/ o JS do header (menu/barra) não quebrar, mas forçado escondido —
   a tripla classe vence o .jpromo-ativo do JS e o display:flex do Elementor. */
.jpromo.jpromo.jpromo { display: none !important; }
.jpromo .elementor-widget-html { position: static !important; }
.jpromo-card { position: relative; z-index: 1; overflow: hidden; pointer-events: auto;
  animation: jpromo-entra .5s ease both; }
/* ondas concêntricas suaves à direita, como na arte do original */
.jpromo-card::after { content: ''; position: absolute; right: -90px; bottom: -40px;
  width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 10px, rgba(15, 23, 41, .055) 10px 11px); }
@keyframes jpromo-entra { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
.jpromo-fechar { position: absolute; top: 12px; right: 12px; z-index: 3; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  /* o X do original é solto, sem caixa nem contorno */
  border: 0; background: none; color: #212121;
  font: 400 24px/1 Poppins, sans-serif; cursor: pointer; }
.jpromo-fechar:hover { color: #41C78F; }
/* Features dos planos: o original usa 14px/1.35 em .jf-feat li. O controle de
   tipografia do widget icon-list do Elementor 4.2 não emite line-height (só cor),
   então a entrelinha vem daqui — sem isso os itens saem em 1.8 e o card fica
   bem mais alto que o dele. */
.jfp-feats .elementor-icon-list-text { line-height: 1.35; }

/* Chip "Planos Jusfy": abraça o conteúdo e fica centrado. O .e-con do Elementor
   nasce com --width:100%, então precisa de fit-content explícito; e o widget de
   ícone traz line-height próprio que desalinhava o ✦ do texto. */
.jf-hchip.jf-hchip { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.jf-hchip .elementor-widget-icon, .jf-hchip .elementor-icon-wrapper,
.jf-hchip .elementor-icon { display: flex; align-items: center; line-height: 0; }
.jf-hchip .elementor-heading-title { line-height: 1; }

/* Barra de abas do comparativo (.jf-tabs-bar do original): faixa clara única com
   as abas dentro dela; a ativa vira cartão branco com sombra. O Elementor não
   expõe fundo do cabeçalho de abas, então vem daqui. */
.jf-tabsbar .e-n-tabs-heading { background: #F1F5F9; border-radius: 14px; padding: 6px; gap: 0; }
/* padding do .jf-tab-btn (12/16): o widget de abas aninhadas não aceita padding
   por seletor comum — ele monta o botão a partir das próprias variáveis, então a
   altura tem de vir por elas. Sem isso a barra ficava em 37px, contra ~56 do original.
   As variáveis têm de ser declaradas NO PRÓPRIO botão: o CSS do widget as zera
   nele, e valor no elemento vence valor herdado de ancestral. */
.jf-tabsbar .e-n-tab-title {
  --n-tabs-title-padding-block-start: 14px; --n-tabs-title-padding-block-end: 14px;
  --n-tabs-title-padding-inline-start: 16px; --n-tabs-title-padding-inline-end: 16px;
  --n-tabs-icon-gap: 8px;
  flex: 1; justify-content: center;
}
.jf-tabsbar .e-n-tab-title[aria-selected="true"] { box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .15); }

.jpromo-marca { margin-bottom: 4px; }
/* fora dos estados com convênio CAA o popup sai sem a tira de co-branding da OAB */
.jpromo-sem-parceria .jpromo-marca { display: none !important; }
.jpromo-cta .elementor-button { letter-spacing: .04em; }
/* no mobile o original centraliza e ocupa a tela */
@media (max-width: 767px) { .jpromo { justify-content: center; padding: 6vw; } }

body.jusfy-blog { margin: 0; font-family: 'Poppins', sans-serif; color: #212121; background: #fff; }
/* o hub do original usa uma grade mais larga que a do site (~1400px) */
.jb-wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* single */
.jb-breadcrumb { font-size: 12px; color: #7a7a7a; padding: 22px 0 6px; }
.jb-breadcrumb a { color: #7a7a7a; text-decoration: none; }
.jb-breadcrumb a:hover { color: #41C78F; }
.jb-single h1.jb-title { font-size: 33px; font-weight: 500; line-height: 1.25; color: #111219; margin: 8px 0 10px; }
.jb-meta { display: flex; gap: 16px; align-items: center; font-size: 13px; color: #7a7a7a; margin-bottom: 22px; }
.jb-meta a { color: #41C78F; text-decoration: none; font-weight: 500; }
.jb-thumb img { width: 100%; height: auto; border-radius: 14px; }
.jb-content { max-width: 860px; margin: 26px auto 0; font-size: 16px; line-height: 1.85; }
.jb-content h2 { font-size: 25px; font-weight: 600; color: #111219; margin: 34px 0 12px; line-height: 1.3; }
.jb-content h3 { font-size: 20px; font-weight: 600; color: #111219; margin: 28px 0 10px; }
.jb-content a { color: #01AB7D; }
.jb-content img { max-width: 100%; height: auto; border-radius: 10px; }
/* citação como no original (OceanWP: blockquote com border-color #111219, itálico) */
.jb-content blockquote { border-left: 3px solid #111219; margin: 20px 0; padding: 4px 18px; color: #5b6472; font-style: italic; }
.jb-content ul, .jb-content ol { padding-left: 24px; }
.jb-share { max-width: 860px; margin: 36px auto 0; border-top: 1px solid #E7E8EC; padding-top: 18px; }
.jb-share span { font-weight: 600; font-size: 15px; margin-right: 12px; }
.jb-share a { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: #111219; color: #fff; align-items: center; justify-content: center; margin-right: 8px; text-decoration: none; font-size: 14px; }
.jb-share a:hover { background: #41C78F; }
.jb-news { max-width: 860px; margin: 40px auto 60px; background: #111219; color: #FAFAFA; border-radius: 16px; padding: 34px 38px; }
.jb-news h2 { margin: 0 0 6px; font-size: 25px; font-weight: 600; color: #fff; }
.jb-news p { margin: 0 0 16px; font-size: 14px; color: #B5B5C3; }
.jb-news a.jb-btn { display: inline-block; background: #49B086; color: #FAFAFA; text-transform: uppercase; font-weight: 600; font-size: 13px; padding: 14px 22px; border-radius: 12px; text-decoration: none; }
.jb-related { max-width: 860px; margin: 10px auto 70px; }
.jb-related h2 { font-size: 25px; font-weight: 500; color: #111219; }

/* archives */
.jb-archive-title { font-size: 33px; font-weight: 500; color: #111219; margin: 34px 0 6px; }
.jb-archive-sub { color: #7a7a7a; font-size: 14px; margin-bottom: 26px; }
.jb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; margin: 10px 0 40px; }
.jb-card { display: flex; flex-direction: column; transition: transform .25s; }
.jb-card:hover { transform: translateY(-3px); }
.jb-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.jb-card .jb-card-img { position: relative; aspect-ratio: 16/10; background: #FAFAFA; border-radius: 14px; overflow: hidden; }
.jb-card .jb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jb-chip { position: absolute; top: 12px; left: 12px; background: rgba(17,18,25,.72); color: #fff; font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: 16px; }
.jb-card .jb-card-body { padding: 16px 2px 4px; display: flex; flex-direction: column; gap: 8px; }
.jb-card h2 { font-size: 16px; line-height: 1.5; font-weight: 600; color: #111219; margin: 0; }
.jb-card .jb-card-exc { font-size: 13px; line-height: 1.6; color: #5b6472; margin: 0; }
.jb-leia { margin-top: auto; color: #01AB7D; font-weight: 600; font-size: 13px; text-decoration: underline; }
.jb-card .jb-card-meta { font-size: 12px; color: #7a7a7a; }

/* destaque rotativo do hub */
.jb-featwrap { max-width: 1440px; margin: 26px auto 8px; padding: 0 20px; }
.jb-feat { display: flex; gap: 54px; align-items: center; }
/* imagem grande e mais alta que 16/9, como no destaque do original */
.jb-feat .jb-feat-img { flex: 0 0 46%; border-radius: 16px; overflow: hidden; aspect-ratio: 3/2; background: #FAFAFA; }
.jb-feat .jb-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jb-feat-body { flex: 1; }
.jb-feat-cat { color: #41C78F; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.jb-feat-body h2 { margin: 12px 0 14px; font-size: 30px; line-height: 1.3; }
.jb-feat-body h2 a { color: #111219; text-decoration: none; font-weight: 700; }
.jb-feat-body p { color: #5b6472; font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
/* no destaque o botão é caixa baixa (o uppercase é só dos CTAs do site).
   A cor do texto leva !important: o kit do Elementor pinta todo <a> de verde e,
   sem isso, sobra verde sobre verde — ilegível. */
.jb-feat-btn { display: inline-block; background: #41C78F; color: #FFFFFF !important; font-size: 15px; font-weight: 500; padding: 13px 30px; border-radius: 8px; text-decoration: none; }
.jb-feat-btn:hover, .jb-feat-btn:focus { background: #2FA875; color: #FFFFFF !important; }
/* os filtros dividem a linha em colunas iguais, como no original */
.jb-filtros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1440px; margin: 30px auto 10px; padding: 0 20px; }
/* cor com !important: o kit do Elementor pinta todo <a> de verde e o texto some no fundo */
.jb-filtros a { font-size: 15px; font-weight: 500; text-decoration: none; padding: 16px 12px; border-radius: 8px; background: #F2F2F2; color: #212121 !important; text-align: center; transition: background .2s ease; }
.jb-filtros a.on, .jb-filtros a:hover, .jb-filtros a:focus { background: #41C78F; color: #FFFFFF !important; }
@media (max-width: 900px) { .jb-filtros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .jb-feat { flex-direction: column; align-items: stretch; } .jb-feat .jb-feat-img { flex: none; } }
.jb-pagination { display: flex; gap: 8px; justify-content: center; margin: 10px 0 60px; flex-wrap: wrap; }
.jb-pagination .page-numbers { padding: 9px 15px; border: 1px solid #E7E8EC; border-radius: 8px; color: #212121; text-decoration: none; font-size: 14px; }
.jb-pagination .page-numbers.current, .jb-pagination .page-numbers:hover { background: #41C78F; border-color: #41C78F; color: #fff; }

/* busca / 404 */
.jb-search-form { display: flex; gap: 10px; margin: 10px 0 30px; max-width: 560px; }
.jb-search-form input[type=search] { flex: 1; padding: 13px 16px; border: 1px solid #DADADA; border-radius: 10px; font-family: inherit; font-size: 14px; }
.jb-search-form button { background: #49B086; color: #fff; border: 0; border-radius: 10px; padding: 13px 22px; font-family: inherit; font-weight: 600; font-size: 13px; text-transform: uppercase; cursor: pointer; }
.jb-404 { text-align: center; padding: 90px 20px 110px; }
.jb-404 h1 { font-size: 33px; font-weight: 500; color: #111219; margin-bottom: 12px; }
.jb-404 p { color: #7a7a7a; margin-bottom: 26px; }
.jb-404 a.jb-btn { display: inline-block; background: #49B086; color: #FAFAFA; text-transform: uppercase; font-weight: 600; font-size: 13px; padding: 16px 26px; border-radius: 12px; text-decoration: none; }

@media (max-width: 1024px) { .jb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .jb-grid { grid-template-columns: 1fr; }
  .jb-single h1.jb-title { font-size: 25px; }
  .jb-content { font-size: 15px; }
  .jb-news { padding: 26px 22px; }
}