/* ACR SCHOOL · pages/planejamento-de-marketing-e-comunicacao.css
   Exclusivo da página do Plano de Comunicação, em :where(), especificidade
   zero. Caminho no servidor:
   wp-content/themes/acr-school/assets/css/pages/planejamento-de-marketing-e-comunicacao.css

   Documento longo de consulta, não de leitura corrida. Reaproveita o
   .acr-juridico da base, que já é o objeto "texto com índice fixo" usado
   pelos Termos e pela Política. Aqui só entra o que a base não tem: a
   busca, os grupos do índice, o painel do celular e os componentes de
   conteúdo (tarefa, tabela, texto para copiar).

   Uma observação que vale para o arquivo inteiro: a base zera margin de
   p, h1-h4 e ul por seletor de elemento, que vence qualquer :where().
   Por isso o espaçamento aqui é sempre gap de contêiner ou padding, nunca
   margin. A única exceção é a regra logo abaixo, escrita com a mesma
   especificidade da base de propósito. */

/* A base dá 24px entre dois .acr-text seguidos. Dentro do documento o
   espaçamento é do contêiner, então os dois somariam. Esta regra empata em
   especificidade com a da base e vence por carregar depois. */
:where(.plano-doc) .acr-text + .acr-text{margin-top:0}

/* Documento de trabalho usa a largura da coluna, não a medida de prosa:
   o parágrafo de 54ch da base ficava estreito ao lado das tabelas e das
   caixas de indicador, que ocupam a coluna inteira. Mesma especificidade
   da base, vence por ordem. */
:where(.plano-doc) .acr-text{max-width:68ch}

/* ------------------------------------------------------------------ *
 * Antes do documento
 * ------------------------------------------------------------------ */
:where(.plano-metrica){display:grid;gap:var(--acr-s2);
  padding:var(--acr-s5);background:var(--acr-surface-alt);
  border-left:var(--acr-rule-accent-btn) solid var(--acr-accent)}
:where(.plano-metrica__v){font-size:clamp(30px,4vw,46px);line-height:1.05}

/* ------------------------------------------------------------------ *
 * Grade e índice
 * ------------------------------------------------------------------ */
/* O cabeçalho do site encolhe de 76 para 64 px quando gruda, e a topbar
   fica fora dele. O valor medido entra por JS nestas duas variáveis, que
   a base já usa para o topo do índice e para o scroll-margin dos títulos.
   Redefinir a variável no contêiner vence o :root por proximidade, sem
   disputa de especificidade. */
:where(.plano-grade){--acr-header-h:76px;
  grid-template-columns:minmax(0,17.5rem) minmax(0,1fr)}

:where(.plano-indice){gap:var(--acr-s3);
  max-height:calc(100dvh - var(--acr-header-h) - var(--acr-s6));
  overflow-y:auto;overscroll-behavior:contain;
  padding-right:var(--acr-s2)}
:where(.plano-indice__topo){display:flex;align-items:center;
  justify-content:space-between;gap:var(--acr-s2)}
:where(.plano-fechar){display:none;background:none;border:0;cursor:pointer;
  padding:6px;color:var(--acr-ink-2)}
:where(.plano-fechar) svg{width:22px;height:22px;fill:none;
  stroke:currentColor;stroke-width:1.6}

:where(.plano-busca){display:flex;align-items:center;gap:8px;
  padding:9px 12px;background:var(--acr-surface);
  border:var(--acr-rule) solid var(--acr-line-3)}
:where(.plano-busca) svg{flex:none;width:16px;height:16px;fill:none;
  stroke:var(--acr-ink-3);stroke-width:1.7}
:where(.plano-busca) input{width:100%;min-width:0;border:0;background:none;
  font-family:var(--acr-font-ui);font-size:14px;color:var(--acr-ink)}
:where(.plano-busca) input:focus{outline:0}
:where(.plano-indice__vazio){font-family:var(--acr-font-ui);font-size:13px;
  color:var(--acr-ink-3)}

:where(.plano-indice__parte){font-family:var(--acr-font-nav);
  font-weight:var(--acr-weight-nav);font-size:var(--acr-label);
  text-transform:uppercase;letter-spacing:var(--acr-tracking-label);
  color:var(--acr-ink-3);padding:var(--acr-s3) 0 6px}
:where(.plano-indice__parte):first-child{padding-top:0}
:where(.plano-indice__lista) ol{display:grid;gap:2px;
  list-style:none;margin:0;padding:0}
/* A base define .acr-juridico__indice a com uma classe e um elemento. Um
   :where() puro perderia, então estas duas empatam com ela e vencem por
   carregar depois. */
:where(.plano-indice__lista) a[href]{display:block;
  padding:7px var(--acr-s2);font-size:14px;line-height:1.35}
:where(.plano-indice__lista) a.plano-indice__cap{display:grid;
  grid-template-columns:2.1rem minmax(0,1fr);align-items:baseline;gap:2px}
:where(.plano-indice__n){font-family:var(--acr-font-nav);
  font-weight:var(--acr-weight-nav);font-size:13px;color:var(--acr-ink-3)}
:where(.plano-indice__lista) li.is-aqui a{color:var(--acr-ink);
  border-left-color:var(--acr-accent);background:var(--acr-surface-alt)}
:where(.plano-indice__lista) li.is-aqui .plano-indice__n{color:var(--acr-accent-text)}

/* ------------------------------------------------------------------ *
 * Barra do celular
 * ------------------------------------------------------------------ */
:where(.plano-movel){display:none}
:where(.plano-fundo){display:none}

/* ------------------------------------------------------------------ *
 * Documento
 * ------------------------------------------------------------------ */
:where(.plano-doc){display:grid;gap:var(--acr-s6)}
:where(.plano-parte){display:grid;gap:4px;padding-top:var(--acr-s5);
  border-top:var(--acr-rule-accent) solid var(--acr-ink)}
:where(.plano-parte):first-child{padding-top:0}
:where(.plano-parte__sub){font-family:var(--acr-font-ui);font-size:14px;
  color:var(--acr-ink-3)}

:where(.plano-cap){display:grid;gap:var(--acr-s3);
  scroll-margin-top:calc(var(--acr-header-h) + var(--acr-s4))}
:where(.plano-cap) .acr-head > h2{max-width:28ch;
  font-family:var(--acr-font-display);font-weight:800;
  font-size:clamp(27px,3.2vw,38px);line-height:1.1;
  text-transform:uppercase;letter-spacing:.004em}
:where(.plano-cap) .acr-head{display:grid;gap:10px}

:where(.plano-sub){padding-top:var(--acr-s4);
  font-family:var(--acr-font-display);font-weight:800;
  font-size:clamp(20px,2.1vw,25px);line-height:1.15;
  text-transform:uppercase;letter-spacing:.004em;color:var(--acr-ink)}

:where(.plano-item){display:grid;gap:10px;padding:var(--acr-s3) 0 var(--acr-s3) var(--acr-s3);
  border-left:var(--acr-rule) solid var(--acr-line-3)}
:where(.plano-item) h4{font-family:var(--acr-font-display);font-weight:800;
  font-size:21px;line-height:1.2;color:var(--acr-ink)}

:where(.plano-nota){padding:var(--acr-s3);background:var(--acr-surface-alt);
  font-size:15px;line-height:1.65;color:var(--acr-ink-2)}
:where(.plano-nota) strong{color:var(--acr-ink)}
:where(.plano-passo){padding-top:var(--acr-s2);
  font-family:var(--acr-font-nav);font-weight:var(--acr-weight-nav);
  font-size:15px;text-transform:uppercase;
  letter-spacing:var(--acr-tracking-label);color:var(--acr-accent-text)}

/* A base faz ul{list-style:none;padding:0} por seletor de elemento, que
   vence :where(). O marcador é desenhado no li. */
:where(.plano-lista){display:grid;gap:10px}
:where(.plano-lista) li{position:relative;padding-left:1.35em;
  font-size:16px;line-height:1.6;color:var(--acr-ink-2)}
:where(.plano-lista) li::before{content:"";position:absolute;left:2px;
  top:.68em;width:5px;height:5px;background:var(--acr-accent)}
:where(.plano-lista) li strong{color:var(--acr-ink)}
:where(.plano-lista) code{font-size:14px;padding:1px 5px;
  background:var(--acr-surface-alt)}

/* ------------------------------------------------------------------ *
 * Tabelas
 * ------------------------------------------------------------------ */
:where(.plano-quadro){display:grid;gap:var(--acr-s2);overflow-x:auto}
:where(.plano-tabela){width:100%;border-collapse:collapse;
  font-family:var(--acr-font-ui);font-size:14px;text-align:left}
:where(.plano-tabela) th{padding:10px 14px 10px 0;
  font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:var(--acr-tracking-label);color:var(--acr-ink-3);
  border-bottom:var(--acr-rule-accent) solid var(--acr-ink);
  white-space:nowrap}
:where(.plano-tabela) td{padding:11px 14px 11px 0;vertical-align:top;
  line-height:1.5;color:var(--acr-ink-2);
  border-bottom:var(--acr-rule) solid var(--acr-line)}
:where(.plano-tabela) tr td:first-child{color:var(--acr-ink);font-weight:500}
:where(.plano-quadro__nota){font-family:var(--acr-font-ui);font-size:13px;
  line-height:1.55;color:var(--acr-ink-3)}

/* ------------------------------------------------------------------ *
 * Cronograma
 * ------------------------------------------------------------------ */
:where(.plano-tarefas){display:grid;gap:var(--acr-s3)}
:where(.plano-tarefas) li{display:grid;gap:8px;padding:var(--acr-s3);
  background:var(--acr-surface-alt)}
:where(.plano-tarefa__titulo){display:flex;flex-wrap:wrap;align-items:center;
  gap:10px;font-size:17px;color:var(--acr-ink)}
/* Cada etiqueta declara fundo E texto. --acr-on-accent é escuro, feito
   para o dourado: usado sobre o azul, sumiria no próprio fundo. */
:where(.plano-tipo){font-family:var(--acr-font-nav);
  font-weight:var(--acr-weight-nav);font-size:12px;text-transform:uppercase;
  letter-spacing:var(--acr-tracking-label);padding:3px 9px;white-space:nowrap}
:where(.plano-tipo--frio){background:var(--acr-ink);color:var(--acr-surface)}
:where(.plano-tipo--quente){background:var(--acr-accent);color:var(--acr-ink)}
:where(.plano-tipo--acao){background:var(--acr-ink-3);color:var(--acr-surface)}
:where(.plano-creditos){font-family:var(--acr-font-ui);font-size:13px;
  color:var(--acr-ink-3)}
:where(.plano-creditos) strong{color:var(--acr-ink-2);font-weight:600}

:where(.plano-equipe){display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:8px var(--acr-s3);align-items:baseline}
:where(.plano-equipe) dt{font-family:var(--acr-font-display);font-weight:800;
  font-size:19px;text-transform:uppercase;color:var(--acr-ink)}
:where(.plano-equipe) dd{margin:0;font-size:16px;color:var(--acr-ink-2)}

/* ------------------------------------------------------------------ *
 * Textos prontos
 * ------------------------------------------------------------------ */
:where(.plano-texto){display:grid;gap:var(--acr-s3);padding:var(--acr-s4);
  border:var(--acr-rule) solid var(--acr-line-3)}
:where(.plano-texto__cabeca){display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--acr-s3)}
:where(.plano-texto__cabeca) > div{display:grid;gap:6px}
:where(.plano-texto__cabeca) h4{font-family:var(--acr-font-display);
  font-weight:800;font-size:20px;line-height:1.2;color:var(--acr-ink)}
:where(.plano-texto__cabeca) button{flex:none}
:where(.plano-texto__corpo){display:grid;gap:var(--acr-s3);
  padding-top:var(--acr-s3);border-top:var(--acr-rule) solid var(--acr-line)}
:where(.plano-texto__corpo) p{font-size:16px;line-height:1.7;
  color:var(--acr-ink-2)}
:where(.plano-texto.is-copiado) [data-plano-btn]{color:var(--acr-on-accent);
  background:var(--acr-accent);border-color:var(--acr-accent)}

:where(.plano-fim){padding-top:var(--acr-s5);
  border-top:var(--acr-rule) solid var(--acr-line-3);
  font-family:var(--acr-font-ui);font-size:14px;color:var(--acr-ink-3)}
:where(.plano-fim) a{text-decoration:underline}

/* ------------------------------------------------------------------ *
 * Voltar ao topo
 * ------------------------------------------------------------------ */
:where(.plano-topo-btn){position:fixed;right:var(--acr-s4);bottom:var(--acr-s4);
  z-index:140;display:grid;place-items:center;width:46px;height:46px;
  cursor:pointer;border:0;color:var(--acr-surface);background:var(--acr-ink)}
:where(.plano-topo-btn)[hidden]{display:none}
:where(.plano-topo-btn) svg{width:20px;height:20px;fill:none;
  stroke:currentColor;stroke-width:1.8}

/* ------------------------------------------------------------------ *
 * Celular: o índice vira painel
 * ------------------------------------------------------------------ */
@media (max-width:1024px){
  :where(.plano-movel){display:flex;align-items:center;
    justify-content:space-between;gap:var(--acr-s2);
    position:sticky;top:var(--acr-header-h);z-index:120;
    margin-bottom:var(--acr-s4);padding:11px 0;
    background:var(--acr-surface);
    border-bottom:var(--acr-rule) solid var(--acr-line-3)}
  :where(.plano-movel__onde){font-family:var(--acr-font-ui);font-size:13px;
    line-height:1.3;color:var(--acr-ink-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :where(.plano-movel__botao){flex:none;display:flex;align-items:center;
    gap:7px;cursor:pointer;padding:8px 14px;border:0;
    font-family:var(--acr-font-nav);font-weight:var(--acr-weight-nav);
    font-size:13px;text-transform:uppercase;
    letter-spacing:var(--acr-tracking-btn);
    color:var(--acr-surface);background:var(--acr-ink)}
  :where(.plano-movel__botao) svg{width:17px;height:17px;fill:none;
    stroke:currentColor;stroke-width:1.8}

  /* A base joga .acr-juridico__indice para position:static no celular,
     com especificidade de classe. Escrito como :where() puro, o painel
     nunca sairia do fluxo. Estes dois seletores empatam com ela e vencem
     por ordem de carga. */
  :where(.plano-grade) .plano-indice{position:fixed;inset:0 0 0 auto;z-index:260;
    width:min(23rem,88vw);max-height:none;
    padding:var(--acr-s4);background:var(--acr-surface);
    box-shadow:-18px 0 50px rgba(0,0,0,.18);
    transform:translateX(100%);
    transition:transform var(--acr-dur-2) var(--acr-ease)}
  :where([data-plano].is-aberto) .plano-grade .plano-indice{transform:translateX(0)}
  :where(.plano-fechar){display:block}
  :where(.plano-fundo){display:block;position:fixed;inset:0;z-index:250;
    background:rgba(0,0,0,.42)}
  :where(.plano-fundo)[hidden]{display:none}

  :where(.plano-item){padding-left:var(--acr-s2)}
  :where(.plano-texto){padding:var(--acr-s3)}
  :where(.plano-texto__cabeca){flex-direction:column;align-items:stretch}
}