/* Páginas internas (consulta online, o jogo) */

.page { position: relative; z-index: 2; }

.crumbs {
  font-family: var(--sans); font-size: 12px; letter-spacing: .12em; color: var(--faint);
  margin: 0 0 1.6rem;
}
.crumbs a { color: var(--gold); }
.crumbs a:hover { color: var(--gold-l); }

.page-hero {
  position: relative; text-align: center; overflow: hidden;
  padding: clamp(130px, 16vw, 180px) var(--pad) clamp(50px, 7vw, 80px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 50% 0%, rgba(160, 34, 34, .35), transparent 70%);
}
.page-hero > * { position: relative; }
.page-hero h1 {
  font-weight: 400; font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.05; letter-spacing: -.02em;
  max-width: 15em; margin: 0 auto 1.3rem;
}
.page-hero .lead { color: var(--muted); font-size: clamp(1.1rem, 1.8vw, 1.35rem); max-width: 36em; margin: 0 auto 2.2rem; }

.page-cards { display: flex; justify-content: center; margin: 0 auto 2.6rem; perspective: 900px; }
.page-cards img {
  width: clamp(92px, 13vw, 150px); height: auto; aspect-ratio: 13 / 20; object-fit: cover; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(244, 206, 123, .5), 0 26px 50px -18px #000;
  margin: 0 -10px;
}
.page-cards img:nth-child(1) { transform: rotate(-9deg) translateY(14px); }
.page-cards img:nth-child(2) { transform: translateZ(40px) scale(1.08); position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(244, 206, 123, .8), 0 0 50px rgba(244, 206, 123, .35), 0 26px 50px -18px #000; }
.page-cards img:nth-child(3) { transform: rotate(9deg) translateY(14px); }

.article { max-width: 780px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) var(--pad) clamp(60px, 8vw, 100px); }
.article h2 {
  font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em;
  margin: 3.2rem 0 1rem;
}
.article h2:first-child { margin-top: 0; }
.article p, .article li { color: var(--muted); }
.article p { margin: 0 0 1.15rem; }
.article a:not(.btn3d) { color: var(--gold-l); border-bottom: 1px solid rgba(221, 170, 60, .4); }
.article a:not(.btn3d):hover { border-color: var(--gold-l); }
.article ul { padding-left: 1.2em; margin: 0 0 1.2rem; }
.article ul li { margin-bottom: .6rem; }
.article ul li::marker { color: var(--gold); content: "✦  "; }
.article strong { color: var(--cream); font-weight: 500; }

.steps-list { list-style: none; counter-reset: s; padding: 0; margin: 0 0 1.4rem; }
.steps-list li { counter-increment: s; position: relative; padding: 0 0 1.4rem 64px; margin: 0; }
.steps-list li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: .1rem;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: #3a2408;
  background: radial-gradient(circle at 32% 28%, #fff1c4, #e8bf62 40%, #b78424 75%);
  box-shadow: inset 0 0 0 2px rgba(120, 80, 14, .5), 0 8px 18px -6px #000;
}
.steps-list h3 { font-weight: 500; font-size: 1.35rem; color: var(--cream); margin: 0 0 .3rem; line-height: 1.25; }
.steps-list p { margin: 0; }

.cta-box {
  margin: 3.6rem 0; padding: clamp(28px, 5vw, 48px); text-align: center; border-radius: 18px;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(221, 170, 60, .2), transparent 70%),
    #f1ece4;
  color: #2b1b18;
  box-shadow: 0 30px 60px -30px #000;
}
.cta-box h2 { margin: 0 0 .6rem; color: #2b1b18; }
.cta-box p { color: rgba(53, 39, 39, .82); margin: 0 0 1.8rem; }
.cta-box .tiny { color: rgba(53, 39, 39, .6); margin: 1.2rem 0 0; }

.faq { margin-top: 3.6rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.25rem 2.6rem 1.25rem 0; font-size: 1.2rem; color: var(--cream); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 22px; color: var(--gold); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 1.3rem; }

.related {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 3.6rem;
}
.related a {
  display: block; padding: 22px 24px; border-radius: 14px; border: 1px solid var(--line) !important;
  background: linear-gradient(135deg, rgba(92, 21, 21, .55), rgba(36, 19, 18, .8));
  transition: transform .4s var(--ease), border-color .4s;
}
.related a:hover { transform: translateY(-4px); border-color: rgba(244, 206, 123, .6) !important; }
.related small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.related span { font-size: 1.3rem; color: var(--cream); }

@media (max-width: 600px) {
  .related { grid-template-columns: 1fr; }
  .steps-list li { padding-left: 58px; }
  .article p, .article li { color: rgba(241, 236, 228, .86); }
}