/* ============================================================
   POST TV — página comercial (/anuncie/)
   ------------------------------------------------------------
   Carrega DEPOIS de institucional.css e reaproveita o que já
   existe lá: .ptv-inst-hero, .ptv-inst-panel, .ptv-inst-values,
   .ptv-inst-facts, .ptv-inst-cta, .ptv-inst-socials, .ptv-btn,
   .ptv-inst-note e o marcador .ptv-mark. Aqui só entra o que é
   próprio desta página: a grade de espaços, os quadros de
   audiência, os passos e o bloco de contato comercial.

   Tokens de style.css (--panel, --line, --ink, --ink-soft,
   --blue, --orange, --lime, --sans, --mono): nenhuma cor solta,
   para o tema claro ([data-theme="light"]) virar sozinho.

   Prefixo "ptv-" e vocabulário neutro — nada de "ad", "banner",
   "sponsor" ou "publicidade" em classe ou id. Numa página que
   fala de publicidade, esses nomes são o primeiro alvo dos
   filtros cosméticos de bloqueador: a página some para o
   anunciante que abriu o site com um bloqueador ligado.
   ============================================================ */

.ptv-com{padding-bottom:48px;}
.ptv-com-intro{margin-top:20px;}

/* Texto de abertura de uma seção, fora de painel.
   "abre", e não "lead": o jargão de redação carrega o "ad" no meio da
   palavra e esta página não dá margem a filtro de bloqueador. */
.ptv-com-abre{
  font-size:.95rem; line-height:1.65; color:var(--ink-soft);
  max-width:70ch; margin-bottom:22px;
}

/* ---------- quadros de audiência ----------
   Cada quadro guarda um {{MARCADOR}} até a POST TV ter medição
   fechada. O quadro é propositalmente grande: número de audiência
   é o dado em que o anunciante decide, e a lacuna tem de saltar
   aos olhos de quem for publicar a página. */
.ptv-num-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:860px){ .ptv-num-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .ptv-num-grid{grid-template-columns:1fr;} }

.ptv-num{
  display:flex; flex-direction:column; gap:10px;
  background:var(--panel-raised); border:1px solid var(--line);
  border-radius:10px; padding:16px;
}
.ptv-num__k{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- grade de espaços ---------- */
.ptv-com-group{
  font-family:var(--mono); font-size:.7rem; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; color:var(--orange);
  margin:26px 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

.ptv-esp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px;}

.ptv-esp{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--lime);
  border-radius:10px; padding:16px;
  text-decoration:none; color:inherit;
  transition:border-color .18s ease, transform .18s ease;
}
.ptv-esp:hover{border-color:var(--orange); transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){ .ptv-esp:hover{transform:none;} }
/* Ocupado: continua clicável (lista de espera), mas recuado no tom. */
.ptv-esp.is-taken{border-left-color:var(--ink-mute);}

/* Miniatura da proporção do criativo: a altura é fixa e a largura sai
   do aspect-ratio, então a diferença entre a faixa 1080×300 e o quadrado
   1080×1080 se vê de relance, sem precisar ler a medida. */
.ptv-esp__prev{
  display:flex; align-items:center; justify-content:center;
  height:58px; width:auto; max-width:100%;
  border:1px dashed var(--line); border-radius:6px;
  background:var(--panel-raised);
  margin-bottom:6px; flex-shrink:0;
}
.ptv-fmt--h{aspect-ratio:1080/300;}   /* 1080 × 300  */
.ptv-fmt--sq{aspect-ratio:1/1;}       /* 1080 × 1080 */
.ptv-esp__dims{
  font-family:var(--mono); font-size:.58rem; color:var(--ink-mute);
  white-space:nowrap; padding:0 4px;
}
/* No quadrado a medida não cabe na largura de 58px. */
.ptv-fmt--sq .ptv-esp__dims{display:none;}

.ptv-esp__name{font-size:.92rem; font-weight:700; line-height:1.3; letter-spacing:-.01em;}
.ptv-esp__meta{font-family:var(--mono); font-size:.66rem; color:var(--ink-soft);}
.ptv-esp__status{
  font-family:var(--mono); font-size:.66rem; line-height:1.4;
  margin-top:auto; padding-top:10px;
}
.ptv-esp__status--free{color:var(--lime); font-weight:700;}
.ptv-esp__status--fila{color:var(--ink-mute);}

/* ---------- como funciona ---------- */
.ptv-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media (max-width:860px){ .ptv-steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .ptv-steps{grid-template-columns:1fr;} }

.ptv-step{
  background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:18px;
}
.ptv-step__n{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--orange); color:#1A0D04;
  font-family:var(--mono); font-size:.74rem; font-weight:700;
  margin-bottom:10px;
}
.ptv-step h3{font-size:.96rem; line-height:1.3; margin-bottom:8px;}
.ptv-step p{font-size:.84rem; line-height:1.55; color:var(--ink-soft);}

/* ---------- contato comercial (dentro da chamada final) ---------- */
.ptv-com-talk{scroll-margin-top:120px;} /* o cabeçalho é fixo: não cobrir o alvo do #ptv-falar */
.ptv-com-contact{display:flex; gap:24px; flex-wrap:wrap; margin-top:18px;}
.ptv-com-contact__k{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
  display:block; margin-bottom:6px;
}

.ptv-com-social{margin-top:20px;}
.ptv-com-social .ptv-inst-note{margin:0 0 12px;}

/* ---------- 390px: nada pode estourar a largura ---------- */
@media (max-width:420px){
  .ptv-esp-grid{grid-template-columns:1fr;}
  .ptv-esp__prev{height:52px;}
  .ptv-com-contact{gap:16px;}
}

/* ============================================================
   Tema claro
   ------------------------------------------------------------
   Mesma regra da folha institucional: laranja e lima são cores
   pensadas para fundo escuro e, como texto miúdo sobre painel
   claro, ficam abaixo de 4,5:1. O acento textual vira o azul da
   marca. Como preenchimento (a bolinha do passo, que leva texto
   escuro por cima) os dois seguem valendo.
   ============================================================ */
[data-theme="light"] .ptv-com-group,
[data-theme="light"] .ptv-esp__status--free{color:var(--blue);}
[data-theme="light"] .ptv-esp{border-left-color:var(--blue);}
[data-theme="light"] .ptv-esp:hover{border-color:var(--blue);}
[data-theme="light"] .ptv-esp.is-taken{border-left-color:var(--ink-mute);}