/*
 * Identidade híbrida CPPEM 2027
 * Base: navy profundo + dourado das artes de divulgação.
 * Do site novo (rebranding 2026): azul vivo em brilhos/gradientes, nunca chapado,
 * tipografia Nunito e ritmo escuro ↔ claro entre seções.
 */
:root {
  --navy-950: #050f2c;
  --navy-900: #0a1f4d;
  --navy-800: #10307a;
  --navy-700: #16409a;
  --blue-500: #2f7ff0;
  --blue-400: #5aa2ff;
  --blue-100: #dcebff;
  --blue-50: #eef5ff;
  --gold: #f2b01e;
  --gold-300: #ffd36b;
  --gold-600: #d99a0b;
  --gold-50: #fff6dd;
  --cream: #f8f5ee;
  --cream-200: #efe9dc;
  --ink: #16264a;
  --muted: #5b6b8a;
  --line: #e3e8f2;
  --white: #ffffff;
  --success: #34d399;

  --font-display: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Cinzel", Georgia, serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-card: 0 10px 30px -12px rgba(10, 31, 77, 0.25);
  --shadow-float: 0 24px 60px -20px rgba(5, 15, 44, 0.55);
  --gradient-gold: linear-gradient(135deg, #ffd36b 0%, #f2b01e 55%, #d99a0b 100%);
  --gradient-night: radial-gradient(120% 90% at 85% 0%, #16409a 0%, #0a1f4d 45%, #050f2c 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

img { display: block; max-width: 100%; }

.icon { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- tipografia ---------- */
.eyebrow {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--gold-600);
}
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--gold); }

.title {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.title em { font-style: normal; color: var(--blue-500); }
.on-dark .title { color: var(--white); }
.on-dark .title em { color: var(--gold); }

.lead { font-size: 15px; line-height: 1.55; color: var(--muted); }
.on-dark .lead { color: #c4d0ea; }

.gold-rule { width: 64px; height: 4px; border-radius: 4px; background: var(--gradient-gold); }

/* ---------- pílulas e selos ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; border-radius: 999px;
  background: var(--navy-900); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242, 176, 30, 0.25); }
.pill.light { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px); }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--gold-50); color: var(--gold-600);
}

/* ---------- brilhos do site novo ---------- */
.orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.orb.blue { background: radial-gradient(circle, rgba(90, 162, 255, 0.55) 0%, rgba(47, 127, 240, 0.12) 45%, transparent 70%); }
.orb.gold { background: radial-gradient(circle, rgba(255, 211, 107, 0.45) 0%, rgba(242, 176, 30, 0.1) 45%, transparent 70%); }
.rings { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.025), 0 0 0 80px rgba(255, 255, 255, 0.02); pointer-events: none; }

/* ---------- brasão ---------- */
.crest {
  border-radius: 50%; background: var(--navy-950);
  border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(242, 176, 30, 0.15), 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden; display: grid; place-items: center;
}
.crest img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- cartões ---------- */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.card-dark {
  background: linear-gradient(160deg, rgba(22, 64, 154, 0.55) 0%, rgba(10, 31, 77, 0.85) 60%);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); color: var(--white);
}
.icon-badge {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--navy-900); color: var(--gold); font-size: 22px;
}
.on-dark .icon-badge, .icon-badge.glow { background: rgba(242, 176, 30, 0.12); border: 1px solid rgba(242, 176, 30, 0.35); }
.number-badge {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-900); color: var(--white); font-family: var(--font-display); font-weight: 900; font-size: 13px;
  box-shadow: 0 0 0 3px var(--gold);
}

/* ---------- tabela de preços ---------- */
.price-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; border: 1px solid var(--line); position: relative; }
.price-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--gradient-gold); }
.price-head { padding: 22px 22px 14px; }
.price-head h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--navy-900); }
.price-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.price-normal { display: flex; justify-content: space-between; padding: 10px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; }
.price-normal b { color: var(--ink); font-size: 14px; letter-spacing: 0; }
.price-rows { padding: 12px 14px 16px; display: grid; gap: 8px; }
.price-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 12px; background: var(--blue-50); font-family: var(--font-display); }
.price-row span { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--navy-800); }
.price-row b { font-size: 17px; font-weight: 900; color: var(--navy-900); }
.price-row.best { background: var(--gradient-gold); box-shadow: 0 8px 18px -8px rgba(217, 154, 11, 0.8); }
.price-row.best span, .price-row.best b { color: var(--navy-950); }
.price-row.best b { font-size: 19px; }

/* ---------- moldura de navegador para prints ---------- */
.browser { border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-float); border: 1px solid rgba(10, 31, 77, 0.12); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #eef1f7; border-bottom: 1px solid #dde3ee; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; }
.browser-bar i:nth-child(3) { background: #28c840; }
.browser-bar span { margin-left: 10px; flex: 1; text-align: center; font-size: 10.5px; color: #6b7a99; background: var(--white); border-radius: 6px; padding: 3px 10px; font-weight: 600; }
.browser img { width: 100%; }
.browser.dark { background: var(--navy-950); border-color: rgba(255, 255, 255, 0.12); }
.browser.dark .browser-bar { background: #0d1a3d; border-bottom-color: rgba(255, 255, 255, 0.08); }
.browser.dark .browser-bar span { background: rgba(255, 255, 255, 0.08); color: #b9c6e4; }

/* ---------- mockup de livros (ilustrativo) ---------- */
.book {
  position: relative; width: 158px; height: 215px; border-radius: 4px 12px 12px 4px;
  color: var(--white); padding: 18px 16px 16px 24px; overflow: hidden;
  box-shadow: inset 6px 0 10px -4px rgba(0, 0, 0, 0.45), 18px 22px 30px -14px rgba(5, 15, 44, 0.6);
  display: flex; flex-direction: column;
}
.book::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 12px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.15) 60%, transparent); }
.book::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; bottom: -60px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, 0.12); }
.book .brand { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.08em; }
.book .kind { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; margin-top: 2px; }
.book .seg { margin-top: auto; font-family: var(--font-display); font-weight: 900; font-size: 13.5px; line-height: 1.1; position: relative; z-index: 1; }
.book .vol { font-size: 10px; font-weight: 700; opacity: 0.85; margin-top: 4px; position: relative; z-index: 1; }
.book.f1 { background: linear-gradient(150deg, #ffcc4d, #f29a1e 70%, #e07d0c); color: var(--navy-950); }
.book.f2 { background: linear-gradient(150deg, #5aa2ff, #1d64d6 70%, #1650b0); }
.book.em { background: linear-gradient(150deg, #1d3f8f, #0a1f4d 70%, #050f2c); }
.book.em .brand { color: var(--gold); }

/* ---------- listas ---------- */
.check-list { list-style: none; display: grid; gap: 8px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.check-list li::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050f2c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.fine-print { font-size: 10.5px; line-height: 1.5; color: var(--muted); }
.on-dark .fine-print { color: #8d9cc0; }