/*
Theme Name:   Kadence Child MK Jurídico
Theme URI:    https://mkjuridico.com.br
Description:  Child theme do Kadence para o MK Jurídico. Site de conversão para tráfego pago, nicho TEA.
Author:       Bruno
Template:     kadence
Version:      1.0.0
Text Domain:  mkjuridico
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* Grafite como cor de autoridade, casando com a logo (preto/branco/cinza).
     O amarelo do material da agência entra só como acento. */
  --grafite:     #1b1b1f;
  --grafite-mid: #3f3f46;
  --texto:       #19191c;
  --texto-suave: #56565e;
  --borda:       #e6e4dd;
  --fundo:       #ffffff;
  --fundo-suave: #f7f6f3;
  --fundo-calmo: #f4f2e9;
  --destaque:    #fdf8e2;

  /* Dois âmbares, e o motivo importa: o amarelo vivo não alcança contraste
     suficiente sobre branco, então ele só aparece sobre superfície escura.
     Sobre fundo claro usa-se o âmbar escuro, que passa em AA. */
  --ambar:       #d9a400;
  --ambar-forte: #8a6500;

  /* O CTA continua verde: é o sinal que o público reconhece como WhatsApp.
     Este tom é mais escuro que o verde de marca porque o texto é branco: com
     #128c4a o contraste dava 4.31:1 e reprovava no AA (mínimo 4.5:1). */
  --zap:         #10844a;
  --zap-hover:   #0c6a3b;

  /* Compatibilidade com os nomes antigos usados no restante da folha. */
  --azul:        var(--grafite);
  --azul-claro:  var(--ambar-forte);

  --largura:     1080px;
  --raio:        10px;
  --sombra:      0 1px 3px rgba(20, 20, 22, .07), 0 8px 24px rgba(20, 20, 22, .05);
}

/* ==========================================================================
   Base: fonte de sistema, sem webfont, para não custar LCP
   ========================================================================== */
body.mkj {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

.mkj h1, .mkj h2, .mkj h3 {
  color: var(--azul);
  line-height: 1.25;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
.mkj h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); }
.mkj h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
.mkj h3 { font-size: 1.15rem; }
.mkj p  { margin: 0 0 1em; }
.mkj a  { color: var(--azul-claro); }

.mkj img { max-width: 100%; height: auto; display: block; }

.mkj-container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.mkj-secao        { padding: 56px 0; }
.mkj-secao--suave { background: var(--fundo-suave); }
.mkj-secao--calmo { background: var(--fundo-calmo); }

/* ==========================================================================
   Header fixo: logo + telefone/WhatsApp + OAB sempre visível
   ========================================================================== */
.mkj-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--borda);
}
.mkj-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}
.mkj-header__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.mkj-header__marca img { width: 38px; height: 38px; }
.mkj-header__nome {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.mkj-header__nome strong { color: var(--azul); font-size: 1rem; }
.mkj-header__oab {
  font-size: .7rem;
  color: var(--texto-suave);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mkj .mkj-header__acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--zap);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 10px 18px;
  border-radius: 999px;
}
.mkj .mkj-header__acao:hover { background: var(--zap-hover); color: #fff; }
.mkj-header__acao svg { width: 18px; height: 18px; fill: currentColor; }
/* No mobile o header enxuga: o botão flutuante já cobre o CTA */
@media (max-width: 600px) {
  .mkj-header__acao span { display: none; }
  .mkj-header__acao { padding: 10px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.mkj-hero { padding: 48px 0 44px; background: linear-gradient(180deg, var(--fundo-calmo), var(--fundo)); }
.mkj-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
}
.mkj-hero__texto p.mkj-hero__sub {
  font-size: 1.1rem;
  color: var(--texto-suave);
  max-width: 46ch;
}
.mkj-hero__foto img {
  width: 100%;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
}
@media (max-width: 860px) {
  .mkj-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .mkj-hero__foto { order: -1; }
}

/* ==========================================================================
   Botões
   ========================================================================== */
.mkj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.mkj-btn svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

/* Os seletores abaixo são prefixados com .mkj de propósito. A regra genérica
   `.mkj a` tem especificidade (0,1,1) e venceria um `.mkj-btn--azul` (0,1,0),
   pintando o texto dos botões-link de azul sobre fundo azul. */
.mkj .mkj-btn--zap  { background: var(--zap); color: #fff; box-shadow: 0 4px 14px rgba(18, 140, 74, .28); }
.mkj .mkj-btn--zap:hover { background: var(--zap-hover); color: #fff; }
.mkj .mkj-btn--azul { background: var(--grafite); color: #fff; }
.mkj .mkj-btn--azul:hover { background: var(--grafite-mid); color: #fff; }
.mkj .mkj-btn--fantasma {
  background: transparent;
  color: var(--azul);
  box-shadow: inset 0 0 0 1.5px var(--borda);
}
.mkj .mkj-btn--fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--azul); color: var(--azul); }
.mkj-btn--bloco { width: 100%; }

.mkj-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 12px; }
.mkj-microcopy { font-size: .88rem; color: var(--texto-suave); margin: 0; }

/* ==========================================================================
   Cartões / listas
   ========================================================================== */
.mkj-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mkj-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 780px) {
  .mkj-grid-2, .mkj-grid-3 { grid-template-columns: 1fr; }
}

.mkj-card {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
}
.mkj-card h3 { margin-top: 0; }
.mkj-card p:last-child { margin-bottom: 0; }
.mkj-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-weight: 600;
  text-decoration: none;
}

/* Lista de dores, sem ícone de "check" comercial, só marcador sóbrio */
.mkj-dores { list-style: none; margin: 0; padding: 0; }
.mkj-dores li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--borda);
}
.mkj-dores li:last-child { border-bottom: 0; }
.mkj-dores li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--azul-claro);
}

/* Passos numerados */
.mkj-passos { counter-reset: passo; list-style: none; margin: 0; padding: 0; }
.mkj-passos li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 22px 52px;
  border-left: 2px solid var(--borda);
  margin-left: 16px;
}
.mkj-passos li:last-child { border-left-color: transparent; padding-bottom: 0; }
.mkj-passos li::before {
  content: counter(passo);
  position: absolute;
  left: -17px;
  top: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grafite);
  color: var(--ambar);
  font-weight: 700;
  font-size: .9rem;
  display: grid;
  place-items: center;
}
.mkj-passos strong { display: block; color: var(--azul); }

/* Documentos */
.mkj-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mkj-docs li {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 12px 16px;
}

/* Base jurídica: respaldo, sem promessa de resultado */
.mkj-base {
  background: var(--destaque);
  border-left: 3px solid var(--ambar);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 20px 24px;
}
.mkj-base ul { margin: 0; padding-left: 18px; }
.mkj-base li { margin-bottom: 6px; }
.mkj-base li:last-child { margin-bottom: 0; }

/* FAQ nativo, sem JS */
.mkj-faq details {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 20px;
  margin-bottom: 10px;
}
.mkj-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--azul);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mkj-faq summary::-webkit-details-marker { display: none; }
.mkj-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--texto-suave); }
.mkj-faq details[open] summary::after { content: "–"; }
.mkj-faq details > p { margin: 12px 0 0; color: var(--texto-suave); }

/* Confiança */
.mkj-confianca { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; }
.mkj-confianca img {
  width: 100%;
  border-radius: var(--raio);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
  box-shadow: var(--sombra);
}
@media (max-width: 700px) {
  .mkj-confianca { grid-template-columns: 1fr; gap: 20px; }
  .mkj-confianca img { max-width: 180px; }
}

/* Placeholder de imagem que o cliente ainda não enviou */
.mkj-img-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 180px;
  padding: 20px;
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-suave);
  color: var(--texto-suave);
  font-size: .85rem;
}

/* ==========================================================================
   Formulário de pré-qualificação (só na LP de BPC/LOAS)
   ========================================================================== */
.mkj-form {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 26px;
  box-shadow: var(--sombra);
}
.mkj-form h3 { margin-top: 0; }
.mkj-form__pergunta { font-weight: 600; color: var(--azul); margin-bottom: 12px; }
.mkj-form__opcoes { display: flex; gap: 10px; margin-bottom: 18px; }
.mkj-form__opcoes label {
  flex: 1;
  text-align: center;
  padding: 12px;
  border: 1.5px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--texto-suave);
}
.mkj-form__opcoes label:hover { border-color: var(--azul-claro); }

/* Os rádios ficam fora do label, como filhos diretos do form, para que o seletor
   de irmão (~) alcance tanto o botão selecionado quanto o ramo correspondente. */
.mkj-radio { position: absolute; opacity: 0; pointer-events: none; }

#mkj-laudo-sim:checked ~ .mkj-form__opcoes label[for="mkj-laudo-sim"],
#mkj-laudo-nao:checked ~ .mkj-form__opcoes label[for="mkj-laudo-nao"] {
  border-color: var(--azul);
  background: var(--destaque);
  color: var(--azul);
}
/* Sem isso a navegação por teclado fica cega: o rádio está oculto. */
.mkj-radio:focus-visible ~ .mkj-form__opcoes label[for="mkj-laudo-sim"],
.mkj-radio:focus-visible ~ .mkj-form__opcoes label[for="mkj-laudo-nao"] {
  outline: 3px solid var(--azul-claro);
  outline-offset: 2px;
}
.mkj-campo { margin-bottom: 14px; }
.mkj-campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.mkj-campo input[type="text"],
.mkj-campo input[type="tel"] {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;
  border: 1.5px solid var(--borda);
  border-radius: 8px;
  box-sizing: border-box;
  font-family: inherit;
}
.mkj-campo input:focus { outline: 2px solid var(--azul-claro); outline-offset: 1px; border-color: transparent; }

.mkj-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .82rem;
  color: var(--texto-suave);
  margin: 14px 0 18px;
}
.mkj-consent input { margin-top: 3px; flex: 0 0 auto; }

.mkj-form__erro {
  background: #fdecec;
  border-left: 3px solid #c0392b;
  color: #8e2b20;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-size: .9rem;
  margin-bottom: 16px;
}
/* Ramificação Sim/Não: o bloco correto aparece conforme a resposta */
.mkj-ramo { display: none; }
#mkj-laudo-sim:checked ~ .mkj-ramo--sim { display: block; }
#mkj-laudo-nao:checked ~ .mkj-ramo--nao { display: block; }

/* ==========================================================================
   Botão flutuante de WhatsApp: presente em todas as páginas
   ========================================================================== */
.mkj .mkj-zap-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--zap);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.mkj .mkj-zap-float:hover { background: var(--zap-hover); color: #fff; }
.mkj-zap-float svg { width: 24px; height: 24px; fill: currentColor; }
@media (max-width: 600px) {
  .mkj-zap-float__label { display: none; }
  .mkj-zap-float { padding: 15px; right: 14px; bottom: 14px; }
}

/* ==========================================================================
   Footer: nº OAB obrigatório em todas as páginas
   ========================================================================== */
.mkj-footer {
  background: var(--grafite);
  color: #c9c7c1;
  padding: 44px 0 28px;
  font-size: .9rem;
}
.mkj-footer a { color: #fff; }
.mkj-footer__topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.mkj-footer__marca { display: flex; align-items: center; gap: 12px; }
.mkj-footer__marca img { width: 44px; height: 44px; }
.mkj-footer__marca strong { color: #fff; display: block; font-size: 1.05rem; }
.mkj-footer__links { display: grid; gap: 6px; }
.mkj-footer__etica {
  margin-top: 24px;
  font-size: .8rem;
  line-height: 1.6;
  color: #97958f;
}
.mkj-footer__oab {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 12px;
  border: 1px solid var(--ambar);
  border-radius: 999px;
  color: var(--ambar);
  font-weight: 600;
  letter-spacing: .03em;
}

/* ==========================================================================
   Aviso de cookies (LGPD)
   ========================================================================== */
.mkj-cookies {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 70;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 16px 18px;
  font-size: .85rem;
  color: var(--texto-suave);
}
.mkj-cookies p { margin: 0 0 12px; }
.mkj-cookies__acoes { display: flex; gap: 8px; }
.mkj-cookies .mkj-btn { padding: 9px 16px; font-size: .88rem; }

/* Um `display` declarado em regra de classe vence o `[hidden] { display: none }`
   do navegador. Sem isto, o aviso nunca fecha no mobile, nem depois de aceito. */
.mkj-cookies[hidden] { display: none; }

@media (max-width: 600px) {
  /* Rente ao rodapé e compacto: no mobile este aviso disputa espaço com o CTA,
     e todo visitante de tráfego pago é de primeira visita: ou seja, todos veem. */
  .mkj-cookies {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: .78rem;
  }
  .mkj-cookies p { margin: 0; flex: 1; }
  .mkj-cookies__acoes { flex: 0 0 auto; }
  .mkj-cookies .mkj-btn { padding: 8px 12px; font-size: .8rem; }

  /* Enquanto o aviso está aberto, o botão flutuante sairia por cima dele.
     Some com o botão até a escolha ser feita: o CTA volta logo em seguida. */
  .mkj-cookies-abertas .mkj-zap-float { display: none; }

  /* Uma barra fixa no rodapé cobre o que estiver no fim do viewport. Sem esta
     folga, o botão de envio do formulário pode ficar inalcançável embaixo dela. */
  body.mkj-cookies-abertas { padding-bottom: 92px; }
}

/* ==========================================================================
   Página de agradecimento
   ========================================================================== */
.mkj-obrigado { text-align: center; padding: 80px 0; }
.mkj-obrigado__icone {
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--zap);
  display: grid;
  place-items: center;
}
.mkj-obrigado__icone svg { width: 34px; height: 34px; fill: #fff; }

/* Conteúdo longo (política de privacidade) */
.mkj-texto { max-width: 720px; margin: 0 auto; padding: 56px 0; }
.mkj-texto h2 { margin-top: 2em; }
.mkj-texto ul { padding-left: 20px; }
.mkj-texto li { margin-bottom: 8px; }

/* Acessibilidade: público navega no celular, alvos de toque generosos */
.mkj a:focus-visible,
.mkj button:focus-visible,
.mkj summary:focus-visible {
  outline: 3px solid var(--azul-claro);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .mkj * { animation: none !important; transition: none !important; }
}