/* ============================================================
   pc-pages-wanjiu.css —— 挽救婚姻 PC 内页 3D 主题
   源稿：emotion-rescue/pc-marriage.html
   主题色：酒红
   依赖：pc-pages.css（通用 .pg-* 类）
   ============================================================ */

/* ===== 页面主题变量 ===== */
.pg-wanjiu {
  --ink: #3b0a1a;
  --ink-2: #5c2534;
  --ink-deep: #20050d;
  --accent: #7a4a57;
  --accent-2: #9c6b78;
  --accent-deep: #4e2a34;
  --gold: #d8a04a;
  --bg: #faf6f2;
  --bg-2: #f4eae4;
  --edge: #e6d7cd;
}

/* ============================================================
   模块一：婚姻五道坎 3D 台阶
   ============================================================ */
.pg-wanjiu-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: end;
  perspective: 1600px;
}
.pg-wanjiu-step {
  border-radius: 28px;
  padding: 16px;
  background: linear-gradient(to bottom, #fff, var(--bg-2));
  border: 1px solid var(--edge);
  box-shadow: 0 8px 0 var(--edge), 0 24px 30px -14px rgba(59, 10, 26, .35);
  transform: rotateX(8deg);
}
.pg-wanjiu-step:nth-child(2),
.pg-wanjiu-step:nth-child(4) { transform: rotateX(8deg) translateY(-16px); }
.pg-wanjiu-step--hot {
  background: linear-gradient(to bottom, var(--accent), var(--ink));
  color: #fff;
  border: none;
  box-shadow: 0 8px 0 var(--ink-deep), 0 24px 30px -14px rgba(59, 10, 26, .55);
  transform: rotateX(8deg) translateY(-32px);
}
.pg-wanjiu-step__ph {
  height: 128px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-wanjiu-step--hot .pg-wanjiu-step__ph { border-color: rgba(255, 255, 255, .5); }
.pg-wanjiu-step__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-wanjiu-step__num {
  margin: 16px 0 0;
  font-size: 44px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: #fff;
  text-shadow: 1px 1px 0 var(--accent-2), 2px 2px 0 var(--accent), 3px 3px 0 var(--accent-deep),
    4px 4px 0 var(--ink-2), 5px 5px 0 var(--ink), 6px 6px 0 var(--ink-deep), 9px 11px 14px rgba(32, 5, 13, .35);
}
.pg-wanjiu-step--hot .pg-wanjiu-step__num {
  color: #fff;
  text-shadow: 2px 2px 0 var(--accent-2), 4px 4px 0 var(--accent-deep), 8px 10px 14px rgba(0, 0, 0, .35);
}
.pg-wanjiu-step__name { margin: 12px 0 0; font-size: 18px; font-weight: 900; color: var(--accent-deep); }
.pg-wanjiu-step--hot .pg-wanjiu-step__name { color: #fff; }
.pg-wanjiu-step__desc { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: #6b3a47; }
.pg-wanjiu-step--hot .pg-wanjiu-step__desc { color: rgba(255, 255, 255, .85); }
.pg-wanjiu-steps__note {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 24px;
  background: var(--ink);
  color: #f7e2e2;
  padding: 16px 24px;
  box-shadow: 0 6px 0 var(--ink-deep);
}
.pg-wanjiu-steps__note span { font-size: 24px; line-height: 1.4; }
.pg-wanjiu-steps__note p { margin: 0; font-size: 15px; line-height: 1.7; }

/* ============================================================
   模块二：四种关系毒药（交互）
   ============================================================ */
.pg-wanjiu-poisons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.pg-wanjiu-poison-hint { margin: 0; font-size: 14px; color: var(--accent); }
.pg-wanjiu-poison-stage { position: relative; height: 440px; margin-top: 16px; }
.pg-wanjiu-poison-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 288px;
  height: 288px;
  border-radius: 50%;
  border: 2px dashed var(--edge);
}
.pg-wanjiu-poison-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 192px;
  height: 192px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, var(--accent-2), var(--accent) 30%, var(--ink) 68%, var(--ink-deep) 100%);
  box-shadow: 0 30px 40px -10px rgba(59, 10, 26, .6), inset -12px -16px 26px rgba(32, 5, 13, .45);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pg-wanjiu-poison-core span:first-child { font-size: 15px; font-weight: 700; color: #f3d5d5; }
.pg-wanjiu-poison-core span:last-child { font-size: 38px; font-weight: 900; line-height: 1.1; }
.pg-wanjiu-poison-ball {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  box-shadow: 0 18px 24px -8px rgba(0, 0, 0, .5), inset -7px -9px 14px rgba(0, 0, 0, .35);
  transition: transform .3s;
}
.pg-wanjiu-poison-ball i {
  position: absolute;
  top: 16px;
  left: 24px;
  width: 36px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  transform: rotate(-25deg);
}
.pg-wanjiu-poison-ball--a { left: 24px; top: 8px; background: radial-gradient(circle at 30% 28%, #fef3c7, #f59e0b 40%, #b45309 100%); }
.pg-wanjiu-poison-ball--b { right: 24px; top: 8px; background: radial-gradient(circle at 30% 28%, #fae8ff, #d946ef 40%, #86198f 100%); }
.pg-wanjiu-poison-ball--c { left: 24px; bottom: 8px; background: radial-gradient(circle at 30% 28%, #f1f5f9, #64748b 42%, #1e293b 100%); }
.pg-wanjiu-poison-ball--d { right: 24px; bottom: 8px; background: radial-gradient(circle at 30% 28%, #e0f2fe, #0ea5e9 40%, #075985 100%); }
.pg-wanjiu-poison-ball.is-on {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px #fff, 0 18px 24px -8px rgba(0, 0, 0, .5), inset -7px -9px 14px rgba(0, 0, 0, .35);
}
.pg-wanjiu-poison-card {
  border-radius: 36px;
  background: var(--ink);
  padding: 28px;
  color: #fff;
  box-shadow: 0 10px 0 var(--ink-deep), 0 40px 60px -20px rgba(59, 10, 26, .7);
  transform: rotateY(-8deg);
}
.pg-wanjiu-poison-card__ph {
  height: 208px;
  border-radius: 26px;
  overflow: hidden;
  border: 2px dashed rgba(255, 255, 255, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-wanjiu-poison-card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-wanjiu-poison-card__head { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }
.pg-wanjiu-poison-card__head p { margin: 0; font-size: 26px; font-weight: 900; }
.pg-wanjiu-poison-card__head span { font-size: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(122, 74, 87, .5); color: #f3d5d5; }
.pg-wanjiu-poison-card__show { margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; }
.pg-wanjiu-poison-card__show span { font-size: 22px; color: #f3b9be; line-height: 1.4; }
.pg-wanjiu-poison-card__show p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .9); }
.pg-wanjiu-poison-card__cure {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  padding: 16px;
}
.pg-wanjiu-poison-card__cure span { font-size: 22px; color: #7dd3a8; line-height: 1.4; }
.pg-wanjiu-poison-card__cure p { margin: 0; font-size: 15px; line-height: 1.7; }
.pg-wanjiu-poison-card__cure b { color: #7dd3a8; }

/* ============================================================
   模块三：情感账户（交互）
   ============================================================ */
.pg-wanjiu-bank {
  display: grid;
  grid-template-columns: auto 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.pg-wanjiu-bank__jar {
  position: relative;
  width: 128px;
  height: 320px;
  border-radius: 64px;
  overflow: hidden;
  background: linear-gradient(to right, #fdf0ef, #fff, #f4e2df);
  border: 6px solid #fff;
  box-shadow: 0 24px 40px -10px rgba(59, 10, 26, .45), inset 0 6px 14px rgba(59, 10, 26, .18);
}
.pg-wanjiu-bank__liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42%;
  background: linear-gradient(to top, var(--ink), var(--accent) 55%, var(--accent-2));
  transition: height .7s;
}
.pg-wanjiu-bank__liquid::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 16px;
  border-radius: 50%;
  background: #f3d5d5;
}
.pg-wanjiu-bank__glass {
  position: absolute;
  top: 24px;
  left: 16px;
  width: 14px;
  height: 224px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
}
.pg-wanjiu-bank__label { margin: 0; font-size: 14px; color: var(--accent); }
.pg-wanjiu-bank__num { margin: 4px 0 0; display: flex; align-items: flex-end; gap: 4px; }
.pg-wanjiu-bank__num span:first-child {
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 4px 0 var(--edge);
}
.pg-wanjiu-bank__num span:last-child { font-size: 18px; font-weight: 700; color: var(--accent-2); margin-bottom: 8px; }
.pg-wanjiu-bank__tag {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fbe9d1;
  color: #8a6208;
}
.pg-wanjiu-bank__tip { margin: 12px 0 0; font-size: 14px; color: #6b3a47; line-height: 1.7; }
.pg-wanjiu-bank__foot { margin: 12px 0 0; font-size: 12px; color: var(--accent-2); }
.pg-wanjiu-bank__acts > p { margin: 0 0 16px; font-size: 15px; font-weight: 900; }
.pg-wanjiu-bank__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-wanjiu-act {
  text-align: left;
  border-radius: 16px;
  border: 1px solid;
  padding: 16px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.pg-wanjiu-act--up { background: #eaf7ef; border-color: #cdeeda; box-shadow: 0 5px 0 #b7e6cb; }
.pg-wanjiu-act--down { background: #f4f6f8; border-color: #dfe5ec; box-shadow: 0 5px 0 #cfd8e2; }
.pg-wanjiu-act.is-on { transform: translateY(4px); box-shadow: 0 1px 0 #cfd8e2; }
.pg-wanjiu-act__top { margin: 0; display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 900; }
.pg-wanjiu-act--up .pg-wanjiu-act__top { color: #0f7a3d; }
.pg-wanjiu-act--down .pg-wanjiu-act__top { color: #475569; }
.pg-wanjiu-act__chk { display: none; color: #0f7a3d; font-size: 18px; }
.pg-wanjiu-act.is-on .pg-wanjiu-act__chk { display: inline; }
.pg-wanjiu-act__txt { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.pg-wanjiu-act--up .pg-wanjiu-act__txt { color: #166534; }
.pg-wanjiu-act--down .pg-wanjiu-act__txt { color: #475569; }

/* ============================================================
   模块四：五步修复路线 3D 菱形路标
   ============================================================ */
.pg-wanjiu-road {
  position: relative;
  border-radius: 48px;
  background: var(--ink);
  padding: 56px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 10px 0 var(--ink-deep), 0 50px 70px -30px rgba(59, 10, 26, .8);
}
.pg-wanjiu-road::before {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .25;
  filter: blur(48px);
}
.pg-wanjiu-road__head { position: relative; display: flex; align-items: flex-end; gap: 16px; margin-bottom: 48px; }
.pg-wanjiu-road__head .pg-head__num {
  background: linear-gradient(135deg, var(--gold), #b47a2c);
  color: var(--ink);
  box-shadow: 0 7px 0 #5c3a10;
}
.pg-wanjiu-road__head .pg-eyebrow { color: var(--gold); }
.pg-wanjiu-road__head .pg-h2 { color: #fff; }
.pg-wanjiu-road__grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.pg-wanjiu-road__line { position: absolute; left: 8%; right: 8%; top: 36px; border-top: 4px dashed rgba(255, 255, 255, .4); }
.pg-wanjiu-road__step { position: relative; text-align: center; }
.pg-wanjiu-road__diamond {
  margin: 0 auto;
  width: 72px;
  height: 72px;
  transform: rotate(45deg);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--ink));
  box-shadow: 5px 5px 0 var(--ink-deep), 0 20px 30px -10px rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-wanjiu-road__diamond span { transform: rotate(-45deg); font-size: 26px; font-weight: 900; color: #fff; }
.pg-wanjiu-road__step--gold .pg-wanjiu-road__diamond {
  background: linear-gradient(135deg, var(--gold), #b47a2c);
  box-shadow: 5px 5px 0 #5c3a10, 0 20px 30px -10px rgba(0, 0, 0, .6);
}
.pg-wanjiu-road__step--gold .pg-wanjiu-road__diamond span { color: var(--ink); }
.pg-wanjiu-road__card {
  margin-top: 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff, #fdf0ef);
  color: var(--ink);
  padding: 20px;
  box-shadow: 0 7px 0 var(--accent-2);
}
.pg-wanjiu-road__step--gold .pg-wanjiu-road__card {
  background: linear-gradient(135deg, #f7e5c9, #fff);
  box-shadow: 0 7px 0 var(--gold);
}
.pg-wanjiu-road__name { margin: 0; font-size: 17px; font-weight: 900; }
.pg-wanjiu-road__desc { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--accent); }

/* ============================================================
   模块五：图文案例（脱敏示例）
   ============================================================ */
.pg-wanjiu-case { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.pg-wanjiu-case__left { position: relative; height: 480px; perspective: 1600px; }
.pg-wanjiu-case__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  height: 360px;
  border-radius: 40px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 10px 0 var(--edge), 0 40px 60px -24px rgba(59, 10, 26, .5);
  transform: rotateY(12deg) rotateX(4deg);
  transition: transform .7s;
}
.pg-wanjiu-case__photo:hover { transform: rotateY(0); }
.pg-wanjiu-case__photo-inner {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  border: 2px dashed var(--edge);
}
.pg-wanjiu-case__photo-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-wanjiu-case__stamp {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--accent), var(--ink));
  padding: 24px;
  color: #fff;
  transform: rotate(4deg);
  box-shadow: 0 10px 0 var(--ink-deep), 0 30px 50px -20px rgba(59, 10, 26, .6);
  z-index: 10;
}
.pg-wanjiu-case__stamp span { font-size: 13px; font-weight: 700; color: #f3d5d5; }
.pg-wanjiu-case__stamp p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; }
.pg-wanjiu-case__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  border-radius: 6px;
  background: #f3e2e4;
  color: var(--accent-deep);
  padding: 4px 8px;
}
.pg-wanjiu-case h2 { margin: 16px 0 0; }
.pg-wanjiu-case__before {
  margin-top: 24px;
  border-radius: 24px;
  background: #f1f3f5;
  padding: 20px;
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, .08);
}
.pg-wanjiu-case__before span { font-size: 13px; font-weight: 700; color: #6b7280; }
.pg-wanjiu-case__before p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; color: #475569; }
.pg-wanjiu-case__timeline {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--accent);
}
.pg-wanjiu-case__bar {
  margin-top: 8px;
  height: 16px;
  border-radius: 999px;
  background: #f3e2e4;
  box-shadow: inset 0 2px 4px rgba(59, 10, 26, .15);
  overflow: hidden;
}
.pg-wanjiu-case__fill {
  height: 100%;
  width: 88%;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent-2), var(--accent), var(--ink));
}