/* ============================================================
   Plano de Transmedia · BlueWavePixel
   Design: cruzamento BWP × IPAM
   Autor: Pedro Estanislau · 2026-05-26
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --------- Tokens --------- */
:root {
  --bg: #1A1A1A;          /* preto-grafite IPAM */
  --bg-deep: #0D1B2A;     /* azul-noite BWP (manifesto) */
  --ink: #F5F7FA;         /* branco-osso BWP */
  --ink-soft: #C7CFD8;
  --ink-mute: #8A95A2;
  --accent: #FF6B35;      /* laranja IPAM */
  --accent-soft: #FFA47A;
  --blue: #039BE5;        /* azul BWP */
  --blue-deep: #1565C0;
  --cyan: #00E5FF;
  --rule: rgba(255, 255, 255, 0.08);
  --rule-strong: rgba(255, 255, 255, 0.18);
  --row-alt: rgba(255, 255, 255, 0.03);
}

/* --------- Reset --------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10pt;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* --------- Page setup --------- */
@page {
  size: A4;
  margin: 0;
}

.page {
  width: 210mm;
  height: 297mm;
  padding: 18mm 16mm 14mm 16mm;
  position: relative;
  page-break-after: always;
  break-after: page;
  overflow: hidden;
  background: var(--bg);
}

.page:last-child { page-break-after: auto; break-after: auto; }

/* Top orange bar (homage IPAM) */
.page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
}

/* --------- Page header --------- */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6mm;
  margin-bottom: 8mm;
  border-bottom: 1px solid var(--rule);
}

.page-head .kicker {
  font-size: 7.5pt;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-head .crumb {
  font-size: 7.5pt;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------- Page footer --------- */
.page-foot {
  position: absolute;
  bottom: 8mm;
  left: 16mm;
  right: 16mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 7pt;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}

.page-foot .pgnum {
  color: var(--blue);
  font-weight: 600;
  font-feature-settings: 'tnum' 1;
}

.page-foot .signature {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* --------- Typography --------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
}

h1 {
  font-size: 24pt;
  letter-spacing: -0.015em;
  margin-bottom: 4mm;
}

h2 {
  font-size: 14pt;
  letter-spacing: -0.01em;
  margin-bottom: 3mm;
  margin-top: 4mm;
  position: relative;
  padding-left: 6mm;
}

h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 3.5mm;
  height: 3.5mm;
  background: var(--accent);
}

h3 {
  font-size: 10.5pt;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-top: 4mm;
  margin-bottom: 2mm;
}

h4 {
  font-size: 9.5pt;
  font-weight: 600;
  color: var(--blue);
  margin-top: 2.5mm;
  margin-bottom: 1.5mm;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

p { margin-bottom: 2mm; color: var(--ink-soft); }

strong { color: var(--ink); font-weight: 600; }
em { color: var(--ink); font-style: italic; }

a { color: var(--blue); text-decoration: none; }

/* --------- Cover --------- */
.cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.cover::before { display: none; }

.cover-bar {
  height: 6mm;
  background: var(--accent);
}

.cover-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16mm;
}

.cover-kicker {
  font-size: 9pt;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8mm;
}

.cover-title {
  font-size: 42pt;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 6mm;
}

.cover-title .strike {
  position: relative;
  display: inline-block;
  color: var(--ink-mute);
  font-weight: 400;
}

.cover-title .strike::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -2%;
  right: -2%;
  height: 0.18em;
  background: var(--accent);
  transform: translateY(-50%) rotate(-2deg);
}

.cover-title .pop { color: var(--blue); }
.cover-title .accent { color: var(--accent); }

.cover-subtitle {
  font-size: 13pt;
  color: var(--ink-soft);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 14mm;
  max-width: 140mm;
}

.cover-manifest {
  border-left: 3px solid var(--blue);
  padding: 4mm 6mm;
  font-style: italic;
  font-size: 11pt;
  line-height: 1.5;
  color: var(--ink);
  max-width: 140mm;
}

.cover-foot {
  padding: 12mm 16mm 16mm 16mm;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--rule);
}

.cover-foot .lhs { display: flex; flex-direction: column; gap: 1mm; }
.cover-foot .lhs .role { font-size: 7.5pt; color: var(--ink-mute); letter-spacing: 0.18em; text-transform: uppercase; }
.cover-foot .lhs .name { font-size: 11pt; color: var(--ink); font-weight: 600; }
.cover-foot .lhs .inst { font-size: 8pt; color: var(--ink-soft); }

.cover-foot .rhs { text-align: right; }
.cover-foot .rhs .lbl { font-size: 7.5pt; color: var(--ink-mute); letter-spacing: 0.18em; text-transform: uppercase; }
.cover-foot .rhs .val { font-size: 10pt; color: var(--blue); font-weight: 600; margin-top: 1mm; }

/* --------- Logo --------- */
.logo-bwp {
  width: 32mm;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* --------- Content blocks --------- */
.intro {
  font-size: 10.5pt;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--blue);
  padding-left: 5mm;
  margin-bottom: 6mm;
}

.lead { color: var(--ink); font-weight: 500; }

/* --------- Two-column --------- */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm;
}

.col h3 { margin-top: 0; }

/* --------- Tables --------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 3mm 0 4mm 0;
  font-size: 8.5pt;
}

th, td {
  text-align: left;
  padding: 1.6mm 2.5mm;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-soft);
}

th {
  background: rgba(255, 107, 53, 0.08);
  color: var(--accent-soft);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 7.5pt;
  letter-spacing: 0.08em;
  border-bottom: 1.5px solid var(--accent);
}

tbody tr:nth-child(odd) td { background: var(--row-alt); }

td strong { color: var(--ink); }

/* --------- Manifesto box --------- */
.manifesto {
  background: var(--bg-deep);
  border-left: 4px solid var(--accent);
  padding: 6mm 7mm;
  margin: 4mm 0;
  position: relative;
}

.manifesto p {
  color: var(--ink);
  font-style: italic;
  font-size: 10.5pt;
  line-height: 1.65;
  margin-bottom: 2.5mm;
}

.manifesto p.lede {
  font-size: 13pt;
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4mm;
  line-height: 1.25;
}

.manifesto p.kick {
  font-size: 11pt;
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4mm;
  margin-bottom: 0;
}

.manifesto p.sign {
  text-align: right;
  font-size: 9pt;
  color: var(--blue);
  font-style: normal;
  margin-top: 3mm;
  letter-spacing: 0.06em;
}

/* --------- Lists --------- */
ul, ol { margin-left: 5mm; margin-bottom: 3mm; }

li {
  color: var(--ink-soft);
  margin-bottom: 1mm;
  line-height: 1.4;
}

li::marker { color: var(--accent); }

.pill-list {
  list-style: none;
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2mm;
  margin-bottom: 3mm;
}

.pill-list li {
  background: rgba(3, 155, 229, 0.1);
  border: 1px solid var(--blue);
  color: var(--ink);
  padding: 1.2mm 3mm;
  font-size: 8pt;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* --------- Boxes --------- */
.box {
  border: 1px solid var(--rule-strong);
  padding: 3.5mm 4mm;
  margin: 2mm 0 3mm 0;
  background: rgba(255, 255, 255, 0.02);
}

.box .box-title {
  font-size: 8pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 1.5mm;
}

.box-blue {
  border-color: var(--blue);
  background: rgba(3, 155, 229, 0.05);
}

.box-blue .box-title { color: var(--blue); }

/* --------- Quotes --------- */
.quote {
  border-left: 2px solid var(--blue);
  padding: 1.5mm 0 1.5mm 4mm;
  margin: 2mm 0;
  font-style: italic;
  color: var(--ink);
  font-size: 9.5pt;
  line-height: 1.55;
}

/* --------- KPI grid --------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2mm;
  margin: 3mm 0;
}

.kpi {
  background: var(--bg-deep);
  border-top: 2px solid var(--blue);
  padding: 3mm;
}

.kpi .v {
  font-size: 14pt;
  font-weight: 700;
  color: var(--accent);
  font-feature-settings: 'tnum' 1;
}

.kpi .l {
  font-size: 7pt;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 1mm;
}

/* --------- Journey diagram --------- */
.journey {
  margin: 4mm 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2mm;
  position: relative;
}

.journey-step {
  background: rgba(255, 255, 255, 0.03);
  border-top: 3px solid var(--blue);
  padding: 3mm;
  position: relative;
  font-size: 8pt;
}

.journey-step:nth-child(1) { border-top-color: #036; }
.journey-step:nth-child(2) { border-top-color: #058; }
.journey-step:nth-child(3) { border-top-color: var(--blue); }
.journey-step:nth-child(4) { border-top-color: var(--accent); }
.journey-step:nth-child(5) { border-top-color: var(--accent-soft); }

.journey-step .step-n {
  font-size: 8pt;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 1mm;
}

.journey-step .step-title {
  font-size: 9pt;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.5mm;
  line-height: 1.2;
}

.journey-step .step-think {
  font-size: 7.5pt;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 1.5mm;
  line-height: 1.35;
}

.journey-step .step-plat {
  font-size: 7pt;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1mm;
}

.journey-step .step-act {
  font-size: 7.5pt;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* --------- Section number badge --------- */
.section-num {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-size: 8pt;
  font-weight: 800;
  padding: 0.5mm 2.2mm;
  margin-right: 3mm;
  vertical-align: 0.4mm;
  letter-spacing: 0.08em;
}

/* --------- Personality grid --------- */
.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5mm;
  margin: 3mm 0;
}

.persona-card {
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--accent);
  padding: 2.2mm 3mm;
  font-size: 8.5pt;
  line-height: 1.4;
  color: var(--ink-soft);
}

.persona-card strong { color: var(--ink); display: block; margin-bottom: 0.5mm; font-size: 8.5pt; }

/* --------- Three-card row --------- */
.three-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm;
  margin: 3mm 0;
}

.fam-card {
  background: rgba(13, 27, 42, 0.6);
  border-top: 3px solid var(--accent);
  padding: 3mm 3.5mm;
}

.fam-card .fam-num { font-size: 7pt; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.fam-card .fam-title { font-size: 11pt; font-weight: 700; color: var(--ink); margin: 1mm 0; line-height: 1.15; }
.fam-card .fam-foe { font-size: 7.5pt; color: var(--blue); font-style: italic; margin-bottom: 2mm; }
.fam-card ul { list-style: none; margin-left: 0; }
.fam-card li {
  font-size: 8pt;
  color: var(--ink-soft);
  padding: 0.8mm 0;
  border-bottom: 1px dotted var(--rule);
}
.fam-card li:last-child { border-bottom: none; }
.fam-card li strong { color: var(--ink); font-weight: 600; }

/* --------- Antagonists table specific --------- */
.antagonists td:first-child { font-weight: 600; color: var(--ink); }
.antagonists td:nth-child(2) { color: var(--accent-soft); font-style: italic; }

/* --------- Seal grid for gamification --------- */
.seals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2mm;
  margin: 3mm 0;
}

.seal {
  background: var(--bg-deep);
  padding: 3mm 2mm;
  text-align: center;
  border-bottom: 3px solid var(--blue);
}

.seal:nth-child(1) { border-bottom-color: #4FC3F7; }
.seal:nth-child(2) { border-bottom-color: var(--blue); }
.seal:nth-child(3) { border-bottom-color: var(--blue-deep); }
.seal:nth-child(4) { border-bottom-color: var(--accent); }
.seal:nth-child(5) { border-bottom-color: #FFD700; }

.seal .dot {
  width: 6mm;
  height: 6mm;
  border-radius: 50%;
  margin: 0 auto 1.5mm auto;
  background: var(--blue);
}

.seal:nth-child(1) .dot { background: #4FC3F7; }
.seal:nth-child(2) .dot { background: var(--blue); }
.seal:nth-child(3) .dot { background: var(--blue-deep); }
.seal:nth-child(4) .dot { background: var(--accent); }
.seal:nth-child(5) .dot { background: #FFD700; }

.seal .seal-name { font-size: 7.5pt; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8mm; }
.seal .seal-cond { font-size: 6.8pt; color: var(--ink-mute); line-height: 1.3; }

/* --------- Final closing page --------- */
.closing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30mm 16mm;
}

.closing .strike-wrap {
  font-size: 36pt;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 6mm;
}

.closing .strike-wrap .strike {
  position: relative;
  color: var(--ink-mute);
  font-weight: 400;
}

.closing .strike-wrap .strike::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -2%;
  right: -2%;
  height: 0.18em;
  background: var(--accent);
  transform: translateY(-50%) rotate(-2deg);
}

.closing .strike-wrap .next { color: var(--accent); }

.closing .end-tag {
  font-size: 8pt;
  color: var(--ink-mute);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 8mm;
}

/* --------- Utilities --------- */
.muted { color: var(--ink-mute); }
.small { font-size: 8pt; }
.tiny { font-size: 7pt; }
.center { text-align: center; }
.right { text-align: right; }
.mt-1 { margin-top: 2mm; } .mt-2 { margin-top: 4mm; } .mt-3 { margin-top: 6mm; }
.mb-1 { margin-bottom: 2mm; } .mb-2 { margin-bottom: 4mm; } .mb-3 { margin-bottom: 6mm; }
.divider { height: 1px; background: var(--rule); margin: 3mm 0; border: none; }

.tight p { margin-bottom: 1mm; }
.dense { font-size: 8.5pt; line-height: 1.4; }
.dense p { margin-bottom: 1.5mm; }

/* Override for screen preview (not printed) */
@media screen {
  body { padding: 20px; background: #0a0a0a; }
  .page {
    margin: 0 auto 24px auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  }
}