/* Mysteries & Perils — Cabecalho institucional + paginas O Jogo / Sobre / FAQ.
   Compoe os MESMOS componentes da home (lp-espera.css + home.css): textura de
   pedra/couro, moldura de ferro com rebites, separador ornamentado, frame de
   screenshot, botao de aco. Nada de fundo chapado. Tokens vem do :root de
   lp-espera.css. */

/* ============================================================ CABECALHO */
/* Fixo (sempre visivel) + mesmo visual de pedra em TODAS as paginas. Encolhe
   no scroll (classe is-scrolled via JS no partial do header). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; width: 100%;
  border-bottom: 1px solid var(--iron);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.9), inset 0 -1px 0 rgba(120,110,92,0.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: box-shadow .25s ease;
}
/* Fundo de pedra numa camada propria, pra poder ficar 50% translucido ao recuar. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,13,10,0.96), rgba(10,9,8,0.96)),
    url('/images/lp/panel-texture.webp');
  background-size: cover, 300px 300px; background-repeat: no-repeat, repeat;
  transition: opacity .25s ease;
}
.site-header.is-scrolled::before { opacity: 0.5; }
.site-header.is-scrolled { box-shadow: 0 6px 20px -10px rgba(0,0,0,0.96); }
.site-header.is-scrolled .site-header__inner { padding-top: 0.18rem; padding-bottom: 0.18rem; }
.site-header.is-scrolled .site-header__logo img { width: 25px; height: 25px; }
.site-header.is-scrolled .site-header__links a { font-size: 0.76rem; padding: 0.2rem 0; }
/* Ao reduzir, o "Entrar na lista" deixa de ser botao e vira link como os demais. */
.site-header.is-scrolled .site-header__cta {
  background: none; border: 0; box-shadow: none;
  color: var(--bone-dim); padding: 0.2rem 0;
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 600;
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em;
}
.site-header.is-scrolled .site-header__cta:hover { color: var(--gold); }
.site-header__inner {
  width: 100%;
  /* Full-width: logo colada na esquerda, idioma+CTA colados na direita, e os
     links (coluna do meio, 1fr auto 1fr) centrados na TELA toda. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 2rem;
  padding: 0.9rem clamp(1.1rem, 2.6vw, 2.4rem);
  transition: padding .25s ease;
}
/* Logo encosta no fim da coluna esquerda: fica a uma distancia fixa (o gap) do
   primeiro link ("Inicio"), acompanhando os links centrados na tela. So o bloco
   da direita (idioma + CTA) e que gruda na lateral. */
.site-header__logo { justify-self: end; margin-right: 218px; }  /* + gap 2rem ~= 250px do "Inicio" */
.site-header__right { justify-self: end; }
/* As variantes overlay/solid agora sao identicas: o base .site-header ja e fixo
   e de pedra em toda pagina. Mantidas vazias so por compatibilidade com o partial. */

.site-header__logo { flex: 0 0 auto; display: inline-flex; line-height: 0; }
.site-header__logo img {
  width: 42px; height: 42px;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,0.7));
  transition: filter .2s ease, width .25s ease, height .25s ease;
}
.site-header__logo:hover img { filter: drop-shadow(0 3px 12px rgba(226,173,60,0.4)); }

.site-header__nav { display: flex; align-items: center; justify-content: center; }
.site-header__right { display: flex; align-items: center; gap: 1.3rem; justify-self: end; }
.site-header__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 2rem;
}
.site-header__links a {
  position: relative;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 0.84rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--bone-dim); text-decoration: none;
  padding: 0.4rem 0; transition: color .2s ease;
}
/* Sublinhado dourado que cresce do centro (feito, nao generico). */
.site-header__links a::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px; background: var(--gold);
  box-shadow: 0 0 8px rgba(226,173,60,0.6);
  transform: translateX(-50%); transition: width .25s ease;
}
.site-header__links a:hover,
.site-header__links a[aria-current="page"] { color: var(--gold); }
.site-header__links a:hover::after,
.site-header__links a[aria-current="page"]::after { width: 100%; }

.site-header__lang {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--iron-line); border-radius: 3px;
  background: rgba(10, 9, 8, 0.55);
  font-family: var(--font-display, 'Cinzel', serif);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
}
.site-header__lang .lang__item { color: var(--bone-dim); text-decoration: none; padding: 0.1rem 0.5rem; transition: color .2s ease; }
.site-header__lang .lang__item + .lang__item { border-left: 1px solid var(--iron-line); }
.site-header__lang .lang__item.is-active { color: var(--gold-hi); text-shadow: 0 0 10px rgba(226,173,60,0.35); }
.site-header__lang a.lang__item:hover { color: var(--bone); }

.site-header__cta { flex: 0 0 auto; font-size: 0.82rem; padding: 0.6rem 1.2rem; }

.site-header__burger { display: none; }
@media (max-width: 880px) {
  .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
  .site-header__logo  { order: 1; margin-right: auto; }
  .site-header__right { order: 2; gap: 0.8rem; }
  .site-header__burger {
    order: 3; display: inline-flex; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 0.4rem;
  }
  .site-header__burger span { width: 26px; height: 2px; background: var(--bone); border-radius: 2px; }
  .site-header__nav {
    order: 4; flex-basis: 100%;
    display: none; justify-content: flex-start;
    padding: 0.8rem 0.2rem 0.4rem; border-top: 1px solid var(--iron-line); margin-top: 0.2rem;
  }
  .site-header__toggle:checked ~ .site-header__nav { display: flex; }
  .site-header__links { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .site-header__cta { font-size: 0.76rem; padding: 0.5rem 0.95rem; }
}

/* ==================================================== FAIXA-HEROI DA PAGINA */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(300px, 46vh, 440px);
  display: grid; place-items: center; text-align: center;
  padding: clamp(6rem, 11vw, 8.5rem) 1.4rem clamp(3rem, 6vw, 4.5rem);
}
.page-hero__bg {                  /* a imagem vem por pagina (inline <style> no head) */
  position: absolute; inset: 0; z-index: -3;
  background-color: #0a0908;
  background-size: cover; background-position: center 32%;
}
.page-hero__bg::after {           /* vinheta + escurecimento pra o texto ler */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 30%, rgba(5,4,3,0.72) 100%),
    linear-gradient(180deg, rgba(6,5,4,0.55) 0%, rgba(6,5,4,0.35) 45%, rgba(6,5,4,0.92) 100%);
}
.page-hero::after {               /* emenda pro conteudo, preto puro */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: clamp(60px, 10vh, 120px);
  background: linear-gradient(180deg, transparent, var(--seam));
}
.page-hero__inner { position: relative; z-index: 1; max-width: 62ch; }
.page-hero__eyebrow {
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.8rem;
  color: var(--gold); margin: 0 0 1rem; text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.page-hero__title {
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 700;
  color: var(--bone); line-height: 1.1; text-wrap: balance;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  margin: 0 0 1.1rem;
  /* Sombra definida atras das letras (contraste pra ler sobre a arte da cena). */
  text-shadow: 0 2px 3px rgba(0,0,0,0.9), 0 3px 10px rgba(0,0,0,0.8);
}
.page-hero__intro {
  font-family: var(--font-body, 'Crimson Text', serif); color: var(--bone-dim);
  font-size: clamp(1.16rem, 2.4vw, 1.4rem); line-height: 1.65; margin: 0 auto; max-width: 54ch;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* Fundo geral das paginas institucionais (preto quente, nao chapado). */
body.site-inst { background: var(--bg, #0a0908); }
.page-inst { position: relative; background: #000; }

/* =================================================== SEPARADOR ORNAMENTADO */
.divider {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: #000; padding: clamp(1.4rem, 3.5vw, 2.6rem) 1.5rem;
}
.divider::before, .divider::after { content: ""; height: 1px; width: min(34%, 320px); }
.divider::before { background: linear-gradient(90deg, transparent, rgba(226,173,60,0.5)); }
.divider::after  { background: linear-gradient(90deg, rgba(226,173,60,0.5), transparent); }
.divider__gem {
  width: 9px; height: 9px; flex: 0 0 auto; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 10px rgba(226,173,60,0.55);
}

/* ============================================ O JOGO: linhas texto + screenshot */
.features { background: #000; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.4rem, 5vw, 3rem) 1rem; }
.feature {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}
.feature + .feature { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.feature__text h2 {
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 600; color: var(--gold);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem); line-height: 1.22; margin: 0 0 0.85rem; text-wrap: balance;
}
.feature__text p {
  font-family: var(--font-body, 'Crimson Text', serif); color: var(--bone-dim);
  font-size: 1.14rem; line-height: 1.72; margin: 0;
}
/* Frame de ferro com textura de pedra (igual ao slide do carrossel). */
.feature__shot {
  margin: 0; position: relative;
  border: 1px solid var(--iron); border-radius: 4px; overflow: hidden;
  background: url('/images/lp/panel-texture.webp'), linear-gradient(158deg, #14110d, #0a0807);
  background-size: 360px 360px, cover; background-repeat: repeat, no-repeat;
  box-shadow: 0 26px 54px -22px rgba(0,0,0,0.9), inset 0 1px 0 rgba(120,110,92,0.16);
}
.feature__shot img { display: block; width: 100%; height: auto; }
.feature--rev .feature__text { order: 2; }
.feature--rev .feature__shot { order: 1; }

/* ============================================ SOBRE: painel de pergaminho de pedra */
.story {
  background: #000; padding: clamp(2.5rem, 6vw, 4.5rem) 1.4rem clamp(1rem, 3vw, 2rem);
}
.story-panel {
  position: relative; max-width: 48rem; margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--iron); border-radius: 4px;
  background: url('/images/lp/panel-texture.webp'), linear-gradient(158deg, #16130f 0%, #100d0a 55%, #0a0807 100%);
  background-size: 340px 340px, cover; background-repeat: repeat, no-repeat;
  box-shadow: 0 30px 60px -26px rgba(0,0,0,0.92), inset 0 1px 0 rgba(120,110,92,0.16);
}
/* Rebites de metal nos quatro cantos (eco da caixa de dialogo do jogo). */
.riveted::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none; border-radius: 3px;
  background:
    radial-gradient(circle 2px at 0 0,        #6f6551, transparent) left top / 14px 14px no-repeat,
    radial-gradient(circle 2px at 100% 0,     #6f6551, transparent) right top / 14px 14px no-repeat,
    radial-gradient(circle 2px at 0 100%,     #6f6551, transparent) left bottom / 14px 14px no-repeat,
    radial-gradient(circle 2px at 100% 100%,  #6f6551, transparent) right bottom / 14px 14px no-repeat;
}
.story-panel__intro {
  font-family: var(--font-body, 'Crimson Text', serif); color: #e6dfd0;
  font-size: clamp(1.2rem, 2.4vw, 1.4rem); line-height: 1.6; font-style: italic;
  margin: 0 0 1.6rem; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.story-panel h2 {
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 600; color: var(--gold);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: 2rem 0 0.8rem; text-wrap: balance;
}
.story-panel h2:first-of-type { margin-top: 0.4rem; }
.story-panel p {
  font-family: var(--font-body, 'Crimson Text', serif); color: #ddd5c5;
  font-size: clamp(1.12rem, 2vw, 1.24rem); line-height: 1.82; margin: 0 0 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Divisor interno curto entre os dois blocos da historia. */
.story-panel .inner-rule {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 2rem 0;
}
.story-panel .inner-rule::before, .story-panel .inner-rule::after {
  content: ""; height: 1px; width: 30%;
}
.story-panel .inner-rule::before { background: linear-gradient(90deg, transparent, var(--iron-hi)); }
.story-panel .inner-rule::after  { background: linear-gradient(90deg, var(--iron-hi), transparent); }
.story-panel .inner-rule span { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-deep); }
.story-sign {
  margin-top: 1.8rem; text-align: right;
  font-family: var(--font-display, 'Cinzel', serif); color: var(--bone-dim);
  letter-spacing: 0.06em; font-size: 1rem;
}

/* ============================================ FAQ: painel com divisorias de ferro */
.faqwrap { background: #000; padding: clamp(2.5rem, 6vw, 4.5rem) 1.4rem clamp(1rem, 3vw, 2rem); }
.faq-panel {
  position: relative; max-width: 48rem; margin: 0 auto;
  padding: clamp(0.6rem, 2vw, 1.4rem) clamp(1.5rem, 5vw, 2.8rem);
  border: 1px solid var(--iron); border-radius: 4px;
  background: url('/images/lp/panel-texture.webp'), linear-gradient(158deg, #16130f 0%, #100d0a 60%, #0a0807 100%);
  background-size: 340px 340px, cover; background-repeat: repeat, no-repeat;
  box-shadow: 0 30px 60px -26px rgba(0,0,0,0.92), inset 0 1px 0 rgba(120,110,92,0.16);
}
.faq__item { border-top: 1px solid var(--iron-line); }
.faq__item:first-of-type { border-top: none; }
.faq__q {                                   /* <button> */
  display: block; width: 100%; text-align: left; background: none; border: 0;
  cursor: pointer; position: relative;
  padding: 1.35rem 2.6rem 1.35rem 0;
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 600; color: var(--bone);
  font-size: 1.14rem; line-height: 1.34; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); transition: color .2s ease;
}
.faq__q:hover, .faq__item.is-open .faq__q { color: var(--gold); }
.faq__q::after {                            /* cruz que vira menos ao abrir */
  content: ""; position: absolute; right: 0.2rem; top: 50%; width: 14px; height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--gold), var(--gold)) center/14px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/2px 14px no-repeat;
  transition: opacity .2s ease; opacity: 0.85;
}
.faq__item.is-open .faq__q::after { background: linear-gradient(var(--gold), var(--gold)) center/14px 2px no-repeat; opacity: 1; }
/* Animacao suave e SEM pulo: grid-rows 0fr -> 1fr interpola a altura real. */
.faq__a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; }
.faq__item.is-open .faq__a-wrap { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; min-height: 0; }   /* sem padding: fechado colapsa a ZERO */
.faq__a {
  font-family: var(--font-body, 'Crimson Text', serif); color: #ddd5c5;
  font-size: 1.12rem; line-height: 1.78; margin: 0; padding: 0 1.5rem 0 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* O respiro de baixo vai no ultimo paragrafo (fica DENTRO do overflow, some ao fechar). */
.faq__a:last-child { padding-bottom: 1.5rem; }
.faq__a + .faq__a { margin-top: 0.85rem; }      /* espaco entre resposta curta e longa */
.faq__a--long { color: #cabfad; }
@media (prefers-reduced-motion: reduce) { .faq__a-wrap { transition: none; } }

/* ==================================================== BANDA DE CTA (couro) */
.cta-band {
  position: relative; isolation: isolate; text-align: center;
  padding: clamp(3rem, 7vw, 5rem) 1.4rem;
  background:
    linear-gradient(180deg, rgba(8,6,5,0.62), rgba(8,6,5,0.44) 40%, rgba(8,6,5,0.7)),
    url('/images/lp/leather-texture.webp');
  background-size: cover, 560px 560px; background-repeat: no-repeat, repeat;
}
.cta-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: clamp(60px, 9vh, 120px);
  background: linear-gradient(180deg, var(--seam), transparent); pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; }
.cta-band__lead {
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 700; color: var(--bone);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.2; margin: 0 0 1.5rem; text-wrap: balance;
}
.cta-band .btn-gold { font-size: 1.02rem; padding: 0.85rem 1.8rem; }

/* ============================================================== RESPONSIVO */
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 1.4rem; }
  .feature--rev .feature__text { order: 1; }
  .feature--rev .feature__shot { order: 2; }
}

/* ===================== PAGINA LEGAL (privacidade) ===================== */
.legal { max-width: 46rem; margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) 1.4rem 5rem; }
.legal__back {
  display: inline-block; margin-bottom: 2.2rem;
  font-family: var(--font-display, 'Cinzel', serif);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem;
  color: var(--bone-dim, #a99f8c); text-decoration: none;
  border-bottom: 1px solid var(--iron-line, rgba(122,110,92,0.30)); padding-bottom: 3px;
}
.legal__back:hover { color: var(--gold, #e2ad3c); border-color: var(--gold, #e2ad3c); }
.legal__title {
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 700;
  color: var(--bone, #d6cdbb); font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.15; margin-bottom: 0.5rem;
}
.legal__updated { color: var(--ash, #837a69); font-size: 0.9rem; margin-bottom: 2.6rem; }
.legal h2 {
  font-family: var(--font-display, 'Cinzel', serif); font-weight: 600;
  color: var(--gold, #e2ad3c); font-size: 1.06rem; letter-spacing: 0.02em; margin: 2.2rem 0 0.7rem;
}
.legal p, .legal li {
  font-family: var(--font-body, 'Crimson Text', serif);
  color: var(--bone-dim, #a99f8c); font-size: 1.08rem; line-height: 1.75;
}
.legal p { margin-bottom: 0.9rem; }
.legal ul { margin: 0 0 0.9rem 1.2rem; }
.legal li { margin-bottom: 0.35rem; }
.legal a { color: var(--gold, #e2ad3c); }