/* Proposta comercial: páginas 16:9 no padrão visual da proposta oficial ContrataPJ.
   Na tela aparece na pré-visualização; na impressão, cada .pp-pagina vira uma página do PDF. */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-var.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-var.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

.report {
  --pp-navy: #161D4E;
  --pp-navy-2: #23307A;
  --pp-ink: #161D4A;
  --pp-text: #4B5168;
  --pp-muted: #7A80A0;
  --pp-paper: #F6F7FD;
  --pp-card: #FFFFFF;
  --pp-line: #E3E6F6;
  --pp-blue: #4259DF;
  --pp-blue-soft: #ECEFFE;
  --pp-blue-light: #8CA0F5;
  --pp-dor: #E05468;
  --pp-dor-soft: #FDECEF;
  --pp-ok: #0F9D6E;
  --pp-display: "Outfit", "Century Gothic", "Trebuchet MS", sans-serif;
  --pp-body: "Plus Jakarta Sans", "Segoe UI", -apple-system, Arial, sans-serif;
}

.pp-pagina {
  page: proposta;
  width: 297mm;
  height: 167mm;
  margin: 0 auto;
  padding: 10mm 16mm 9mm;
  display: flex;
  flex-direction: column;
  background: var(--pp-paper);
  color: var(--pp-text);
  font-family: var(--pp-body);
  font-size: 9.4pt;
  line-height: 1.45;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(22, 29, 78, 0.1), 0 20px 50px -24px rgba(22, 29, 78, 0.4);
}
/* Reset sem especificidade: as margens das classes abaixo continuam valendo. */
:where(.pp-pagina) :where(p, h1, h2, h3, ul, ol, blockquote, dl, dd) { margin: 0; }
.pp-escura {
  background: radial-gradient(120% 140% at 0% 0%, var(--pp-navy-2) 0%, var(--pp-navy) 55%, #10163D 100%);
  color: rgba(255, 255, 255, 0.82);
}

/* Moldura comum */
.pp-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6mm; }
.pp-kicker {
  font-size: 7.4pt; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pp-blue);
  display: flex; align-items: center; gap: 3mm;
}
.pp-kicker::before { content: ""; width: 7mm; height: 0.35mm; background: currentColor; }
.pp-escura .pp-kicker { color: var(--pp-blue-light); }
.pp-num { font-size: 7.5pt; font-weight: 700; color: var(--pp-muted); }
.pp-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5mm; min-height: 0; padding-bottom: 4mm; }
.pp-rodape { display: flex; justify-content: space-between; align-items: center; font-size: 7.4pt; color: var(--pp-muted); }
.pp-logo { height: 5mm; width: auto; }

.pp-h1 {
  font-family: var(--pp-display); font-weight: 800; color: #fff;
  font-size: 34pt; line-height: 1.02; letter-spacing: -0.035em; max-width: 210mm;
}
.pp-h1-menor { font-size: 30pt; margin: 3mm 0 2mm; }
.pp-h2 {
  font-family: var(--pp-display); font-weight: 800; color: var(--pp-ink);
  font-size: 22pt; line-height: 1.05; letter-spacing: -0.03em; max-width: 230mm;
}
.pp-h3 { font-family: var(--pp-display); font-weight: 700; color: var(--pp-ink); font-size: 11.5pt; margin-bottom: 2mm; }
.pp-azul { color: var(--pp-blue); }
.pp-azul-claro { color: var(--pp-blue-light); }
.pp-dor { color: var(--pp-dor); }
.pp-pill {
  align-self: flex-start; display: inline-block; padding: 1.4mm 3.5mm; border-radius: 99px;
  border: 1px solid rgba(140, 160, 245, 0.35); background: rgba(140, 160, 245, 0.12);
  font-size: 8pt; font-weight: 600; color: #fff;
}
.pp-nota { font-size: 7.6pt; color: var(--pp-muted); }

/* 1 · Capa */
.pp-capa { padding-top: 13mm; }
.pp-capa-topo { display: flex; align-items: center; gap: 5mm; }
.pp-logo-capa { height: 9mm; width: auto; }
.pp-x { font-size: 13pt; color: var(--pp-blue-light); }
.pp-capa-cliente { font-family: var(--pp-display); font-weight: 800; font-size: 19pt; color: #fff; letter-spacing: -0.02em; }
.pp-capa-texto { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5mm; }
.pp-capa-sub { font-size: 11pt; color: rgba(255, 255, 255, 0.78); max-width: 170mm; }
.pp-capa-rodape { display: flex; justify-content: space-between; font-size: 8pt; color: rgba(255, 255, 255, 0.6); }

/* Cartões */
.pp-cartao {
  background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 3.5mm; padding: 3.5mm 4mm;
}
.pp-cartao-rotulo { font-size: 7pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-muted); }
.pp-cartao-valor { font-family: var(--pp-display); font-weight: 700; font-size: 13pt; color: var(--pp-ink); margin-top: 1mm; }
.pp-cartao-sub { font-size: 7.8pt; color: var(--pp-muted); margin-top: 0.5mm; }

/* 2 · O que entendemos */
.pp-entendemos { display: grid; grid-template-columns: 1.25fr 1fr; gap: 7mm; align-items: start; }
.pp-entendemos-esq { display: flex; flex-direction: column; gap: 4mm; }
.pp-citacao {
  border-left: 1.2mm solid var(--pp-dor); padding: 1mm 0 1mm 5mm;
  font-family: var(--pp-display); font-size: 14pt; font-weight: 600; line-height: 1.25; color: var(--pp-ink);
}
.pp-citacao cite { display: block; margin-top: 2mm; font-family: var(--pp-body); font-size: 8pt; font-style: normal; font-weight: 600; color: var(--pp-muted); }
.pp-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; }
.pp-lista-dores { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2.4mm; }
.pp-lista-dores li {
  background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 3mm; padding: 2.6mm 3.5mm;
  font-size: 8.8pt; color: var(--pp-ink); display: flex; flex-direction: column; gap: 1mm;
}
.pp-lista-dores .pp-dor-principal { background: var(--pp-dor-soft); border-color: rgba(224, 84, 104, 0.35); font-weight: 600; }
.pp-tag-prioridade {
  align-self: flex-start; font-size: 6.6pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--pp-dor); padding: 0.5mm 2mm; border-radius: 99px;
}

/* 3 · Como resolvemos */
.pp-tabela-dores { width: 100%; border-collapse: separate; border-spacing: 0 1.8mm; }
.pp-tabela-dores th {
  text-align: left; font-size: 7pt; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pp-muted); padding: 0 4mm;
}
.pp-tabela-dores td { background: var(--pp-card); padding: 2.6mm 4mm; vertical-align: top; border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); }
.pp-tabela-dores td:first-child { border-left: 1px solid var(--pp-line); border-radius: 3mm 0 0 3mm; width: 42%; }
.pp-tabela-dores td:last-child { border-right: 1px solid var(--pp-line); border-radius: 0 3mm 3mm 0; }
.pp-tabela-dores td strong { display: block; font-family: var(--pp-display); font-size: 10pt; color: var(--pp-blue); }
.pp-tabela-dores td span { font-size: 8.6pt; color: var(--pp-text); }
.pp-hoje { color: var(--pp-ink); font-size: 8.8pt; }
.pp-linha-principal td { background: var(--pp-blue-soft); border-color: rgba(66, 89, 223, 0.3); }
.pp-linha-principal .pp-hoje { font-weight: 700; }

/* 4 · Custo × investimento */
.pp-custo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 9mm; }
.pp-custo-rotulo { font-size: 8pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-dor); }
.pp-custo-valor { font-family: var(--pp-display); font-weight: 800; font-size: 38pt; letter-spacing: -0.04em; color: var(--pp-ink); line-height: 1.05; }
.pp-custo-valor small { font-size: 14pt; color: var(--pp-muted); font-weight: 600; letter-spacing: 0; }
.pp-custo-sub { font-size: 8pt; color: var(--pp-muted); margin-bottom: 5mm; }
.pp-barras { display: flex; flex-direction: column; gap: 2.4mm; }
.pp-barra { display: grid; grid-template-columns: 22mm 1fr 30mm; align-items: center; gap: 3mm; font-size: 8.4pt; }
.pp-barra-rotulo { font-weight: 600; color: var(--pp-ink); }
.pp-barra-trilho { height: 5mm; background: var(--pp-line); border-radius: 99px; overflow: hidden; }
.pp-barra-fill { display: block; height: 100%; border-radius: 99px; }
.pp-barra-custo { background: var(--pp-dor); }
.pp-barra-invest { background: var(--pp-blue); }
.pp-barra-valor { text-align: right; font-weight: 700; color: var(--pp-ink); }
.pp-comparativo { margin-top: 4mm; font-family: var(--pp-display); font-size: 12pt; font-weight: 700; color: var(--pp-blue); }
.pp-reforma { background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 4mm; padding: 5mm; font-size: 8.6pt; }
.pp-reforma-kpis { display: grid; gap: 2mm; margin-top: 4mm; }
.pp-reforma-kpis div { display: flex; justify-content: space-between; border-top: 1px solid var(--pp-line); padding-top: 2mm; }
.pp-reforma-kpis dt { color: var(--pp-muted); }
.pp-reforma-kpis dd { font-weight: 700; color: var(--pp-ink); }

/* 5 · Por que a ContrataPJ */
.pp-diferenciais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; }
.pp-diferencial {
  background: var(--pp-card); border: 1px solid var(--pp-line); border-top: 1mm solid var(--pp-blue);
  border-radius: 3mm; padding: 3.5mm; display: flex; flex-direction: column; gap: 1.5mm;
}
.pp-diferencial strong { font-family: var(--pp-display); font-size: 10.5pt; color: var(--pp-ink); line-height: 1.15; }
.pp-diferencial span { font-size: 8pt; }
.pp-prova { display: grid; grid-template-columns: 52mm 1fr; gap: 6mm; align-items: start; }
.pp-numeros { display: flex; flex-direction: column; gap: 2mm; }
.pp-numeros p { display: flex; flex-direction: column; }
.pp-numeros strong { font-family: var(--pp-display); font-weight: 800; font-size: 26pt; line-height: 1; color: var(--pp-blue); letter-spacing: -0.03em; }
.pp-numeros span { font-size: 8pt; color: var(--pp-muted); }
.pp-depoimentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.pp-depoimento { background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 3mm; padding: 3.5mm; font-size: 8pt; color: var(--pp-ink); }
.pp-depoimento cite { display: block; margin-top: 2mm; font-style: normal; font-weight: 700; color: var(--pp-blue); font-size: 7.6pt; }
.pp-clientes { font-family: var(--pp-display); font-weight: 700; font-size: 11pt; color: var(--pp-ink); letter-spacing: 0.01em; }
.pp-clientes span {
  font-family: var(--pp-body); font-size: 7pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pp-muted);
  margin-right: 4mm;
}

/* 6 · Investimento */
.pp-invest { display: grid; grid-template-columns: 1.05fr 1fr; gap: 6mm; }
.pp-invest-cartao {
  background: var(--pp-card); border: 1.2px solid var(--pp-blue); border-radius: 4mm; padding: 5mm 6mm;
  box-shadow: 0 0 0 1.5mm var(--pp-blue-soft);
}
.pp-preco { margin: 2mm 0 3mm; }
.pp-preco-tabela { font-size: 9pt; color: var(--pp-muted); text-decoration: line-through; }
.pp-preco-valor { font-family: var(--pp-display); font-weight: 800; font-size: 36pt; color: var(--pp-blue); letter-spacing: -0.04em; line-height: 1; }
.pp-preco-valor small { font-family: var(--pp-body); font-size: 9pt; font-weight: 600; color: var(--pp-muted); letter-spacing: 0; margin-left: 2mm; }
.pp-preco-desconto { color: var(--pp-ok); font-weight: 700; font-size: 9pt; margin-top: 1mm; }
.pp-tabela-invest { width: 100%; border-collapse: collapse; }
.pp-tabela-invest th { text-align: left; font-weight: 500; color: var(--pp-text); padding: 1.8mm 0; }
.pp-tabela-invest td { text-align: right; font-weight: 700; color: var(--pp-ink); padding: 1.8mm 0; }
.pp-tabela-invest tr { border-top: 1px solid var(--pp-line); }
.pp-tabela-invest .pp-inclusa td { color: var(--pp-ok); }
.pp-tabela-invest .pp-total { border-top: 0.6mm solid var(--pp-ink); }
.pp-tabela-invest .pp-total th, .pp-tabela-invest .pp-total td { font-family: var(--pp-display); font-weight: 800; font-size: 12pt; color: var(--pp-ink); }
.pp-invest-lateral { display: flex; flex-direction: column; gap: 3mm; }
.pp-validade { background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 4mm; padding: 4.5mm 5mm; display: flex; flex-direction: column; gap: 1.6mm; }
.pp-validade-data { font-family: var(--pp-display); font-weight: 800; font-size: 16pt; color: var(--pp-ink); line-height: 1.1; }
.pp-contrapartidas { padding-left: 4mm; font-weight: 600; color: var(--pp-ink); }
.pp-alerta { background: var(--pp-dor-soft); color: #B4233A; border-radius: 2.5mm; padding: 2.4mm 3mm; font-size: 8.2pt; font-weight: 600; }
.pp-incluso { list-style: none; padding: 0; display: grid; gap: 1.4mm; font-size: 8.6pt; color: var(--pp-ink); }
.pp-incluso li::before { content: "✓"; color: var(--pp-blue); font-weight: 800; margin-right: 2.5mm; }

/* 7 · Próximo passo */
.pp-final-corpo { flex-direction: row; justify-content: space-between; align-items: center; gap: 12mm; }
.pp-etapas { list-style: none; padding: 0; margin-top: 7mm; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; counter-reset: etapa; max-width: 175mm; }
.pp-etapas li { counter-increment: etapa; border-top: 1px solid rgba(140, 160, 245, 0.35); padding-top: 3mm; display: flex; flex-direction: column; gap: 1mm; font-size: 8.2pt; }
.pp-etapas li::before { content: counter(etapa, decimal-leading-zero); font-family: var(--pp-display); font-weight: 800; color: var(--pp-blue-light); font-size: 12pt; }
.pp-etapas strong { color: #fff; font-size: 9.4pt; }
.pp-vendedor {
  min-width: 62mm; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(140, 160, 245, 0.3);
  border-radius: 4mm; padding: 5mm; display: flex; flex-direction: column; gap: 1.2mm;
}
.pp-vendedor .pp-cartao-rotulo { color: var(--pp-blue-light); }
.pp-vendedor-nome { font-family: var(--pp-display); font-weight: 700; font-size: 14pt; color: #fff; }
.pp-escura .pp-rodape { color: rgba(255, 255, 255, 0.55); }

/* Impressão: páginas 16:9 da proposta + anexo em A4 retrato (report.css) */
@page proposta { size: 297mm 167mm; margin: 0; }
@media print {
  .pp-pagina { box-shadow: none; margin: 0; break-after: page; }
}

/* 6 · O prestador também ganha */
.pp-lead { font-size: 10.5pt; color: var(--pp-text); max-width: 200mm; }
.pp-beneficios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.5mm; }
.pp-beneficio {
  background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 3.5mm; padding: 4.5mm 4mm;
  display: flex; flex-direction: column; gap: 1.6mm; font-size: 8.4pt;
}
.pp-beneficio strong { font-family: var(--pp-display); font-size: 11.5pt; color: var(--pp-ink); line-height: 1.15; }
.pp-beneficio-preco {
  align-self: flex-start; font-weight: 700; font-size: 8.4pt; color: var(--pp-blue);
  background: var(--pp-blue-soft); padding: 0.6mm 2.4mm; border-radius: 99px;
}
.pp-painel { font-size: 8.8pt; font-weight: 600; color: var(--pp-ink); }
.pp-painel span {
  font-size: 7pt; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pp-muted); margin-right: 4mm;
}
.pp-beneficio-nota { font-size: 7.4pt; color: var(--pp-muted); }