/* ============================================================
   invisivel.css — Travessia do Invisível
   Produto premium isolado. Sobrescreve jornada.css (mesmo padrão de
   vinculos.css/sonhos.css): reaproveita a estrutura geral e troca a
   paleta — fundo quase-preto azulado, símbolos anônimos em
   roxo-acinzentado frio (ainda sem identidade), e a peça do EU em
   dourado quente, sempre visualmente distinta das demais.
   ============================================================ */

.invisivel-body { background: #0a0a12; position: relative; }
.invisivel-body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background-image: url('images/fundo-invisivel.jpg');
  background-size: cover; background-position: center bottom; background-repeat: no-repeat;
}
@media (max-width: 640px) {
  .invisivel-body::before { background-image: url('images/mobile-invisivel.jpg'); background-position: center top; }
}
.invisivel-body--escura { background: #0a0a12; }

.jornada-topbar { /* reforça caso jornada.css não centralize (ver nota em vinculos.css) */
  position: fixed; top: 0; left: 0; right: 0; padding: .5rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(10,10,18,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.04); z-index: 50;
}
.invisivel-body .topbar-logo { color: #b8b8d8; opacity: .7; }
.invisivel-body .topbar-dash { color: #8888a8; }
.invisivel-body .topbar-dash:hover { color: #c8c8e8; }
.divider { border: none; border-top: 1px solid rgba(255,255,255,.08); }

.invisivel-body .btn-jornada-iniciar,
.invisivel-body .btn-jornada-principal {
  background: rgba(140,140,200,.16); border-color: rgba(140,140,200,.35); color: #ece8f8;
}
.invisivel-body .btn-jornada-iniciar:hover,
.invisivel-body .btn-jornada-principal:hover { background: rgba(140,140,200,.26); }
.invisivel-body .btn-jornada-avancar { color: #a8a8c8; border-color: rgba(255,255,255,.15); }
.invisivel-body .btn-jornada-avancar:hover { border-color: rgba(140,140,200,.4); color: #e0e0f0; }

.invisivel-body .jornada-mare-badge {
  background: rgba(140,140,200,.14); border-color: rgba(140,140,200,.3); color: #b0b0d8;
}
.invisivel-body .jornada-titulo-mare { color: #e0e0f0; }
.invisivel-body .progress-fill,
.invisivel-body .barra-progresso-fill { background: linear-gradient(90deg,#3a3a5a,#8888c8); }
.invisivel-body .etapa-label-pequeno { color: #a0a0d0; }
.invisivel-body .guardiao-loader .loader-ondas span { background: #9090c8; }
.invisivel-body .silencio-convite { color: #a8a8c0; }
.invisivel-body .countdown-progresso { stroke: #9090c8; }
.invisivel-body .countdown-trilha { stroke: rgba(140,140,200,.1); }

/* ============================================================
   Componentes exclusivos da Travessia do Invisível
   ============================================================ */

/* ── Escrita às cegas — 7 campos numa única tela ───────────── */
.invisivel-escrita-grid { display: flex; flex-direction: column; gap: 14px; margin: 1.5rem 0 2rem; }
.invisivel-escrita-item {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(140,140,200,.15);
  border-radius: 8px; padding: 12px 16px;
}
.invisivel-escrita-numero {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(140,140,200,.12); border: 1px solid rgba(140,140,200,.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-size: .85rem; color: #b0b0d8;
}
.invisivel-escrita-input {
  flex: 1; background: rgba(255,255,255,.03); border: 1px solid rgba(140,140,200,.18);
  border-radius: 6px; color: #e0e0f0; padding: 10px 14px; font-family: inherit; font-size: .98rem;
}
.invisivel-escrita-input:focus { outline: none; border-color: rgba(140,140,200,.5); }
.invisivel-escrita-instrucao {
  text-align: center; font-size: .92rem; color: rgba(168,168,192,.85);
  line-height: 1.7; margin-bottom: 1.5rem; max-width: 520px; margin-left: auto; margin-right: auto;
}

/* ── Mapa espacial — reaproveita estrutura, paleta nova ────── */
.invisivel-mapa-area {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 1;
  margin: 1.5rem auto 1rem; border-radius: 50%;
  border: 1px dashed rgba(140,140,200,.25);
  background: radial-gradient(circle, rgba(140,140,200,.05) 0%, transparent 70%);
  touch-action: none;
}
.invisivel-mapa-instrucao {
  text-align: center; font-size: .88rem; color: rgba(168,168,192,.75);
  margin-bottom: .8rem; font-style: italic;
}
/* Símbolo anônimo arrastável — ainda sem significado revelado */
.invisivel-simbolo-arrastavel {
  position: absolute; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18,18,32,.95); border: 1px solid rgba(140,140,200,.4);
  border-radius: 50%; cursor: grab; user-select: none;
  transform: translate(-50%, -50%); transition: box-shadow .2s, border-color .2s;
  touch-action: none; left: 0; top: 0; font-size: 1.3rem; color: #c0c0e0;
}
.invisivel-simbolo-arrastavel:active { cursor: grabbing; box-shadow: 0 0 0 4px rgba(140,140,200,.18); }
.invisivel-simbolo-arrastavel.arrastando { border-color: #b0b0e8; z-index: 10; }
.invisivel-simbolo-arrastavel.simbolo-em-foco {
  border-color: #d4af6a; box-shadow: 0 0 0 5px rgba(212,175,106,.15);
}
/* A peça do EU — sempre visualmente distinta, dourada, e travada */
.invisivel-peca-eu {
  position: absolute; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(212,175,106,.22), rgba(18,18,32,.97));
  border: 1.5px solid rgba(212,175,106,.65); border-radius: 50%;
  cursor: grab; user-select: none; transform: translate(-50%, -50%);
  touch-action: none; left: 0; top: 0;
  font-family: 'Jost', sans-serif; font-size: .8rem; letter-spacing: .05em; color: #d4af6a;
  transition: box-shadow .2s;
}
.invisivel-peca-eu.travada { cursor: default; box-shadow: 0 0 0 6px rgba(212,175,106,.1); }
.invisivel-peca-eu:active:not(.travada) { cursor: grabbing; }

/* ── Etapa de perguntas (uma por símbolo) ──────────────────── */
.invisivel-pergunta-numero {
  text-align: center; font-size: .75rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(140,140,200,.6);
  margin-bottom: .6rem; font-family: 'Jost', sans-serif;
}
.invisivel-pergunta-texto {
  font-size: .95rem; color: #e0e0f0; font-style: italic;
  line-height: 1.2; margin-bottom: 1.2rem; text-align: center;
}
.invisivel-resposta-textarea {
  width: 100%; background: rgba(255,255,255,.03); border: 1px solid rgba(140,140,200,.18);
  border-radius: 6px; color: #e0e0f0; font-size: 1rem; line-height: 1.7;
  padding: 1rem; resize: vertical; font-family: inherit; box-sizing: border-box;
  min-height: 90px; margin-bottom: 1rem;
}
.invisivel-resposta-textarea:focus { outline: none; border-color: rgba(140,140,200,.5); }
.invisivel-mover-aviso {
  text-align: center; font-size: .85rem; color: rgba(168,168,192,.7);
  margin: .8rem 0 1.2rem; font-style: italic;
}

/* ── Revelação final ────────────────────────────────────────── */
.invisivel-revelacao-mapa {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 1;
  margin: 1.5rem auto 2rem; border-radius: 50%;
  border: 1px solid rgba(212,175,106,.2);
  background: radial-gradient(circle, rgba(212,175,106,.04) 0%, transparent 70%);
}
.invisivel-revelacao-simbolo {
  position: absolute; width: 58px; height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(18,18,32,.95); border: 1px solid rgba(140,140,200,.4);
  border-radius: 50%; transform: translate(-50%, -50%); text-align: center;
}
.invisivel-revelacao-simbolo .forma { font-size: 1.1rem; color: #c0c0e0; line-height: 1; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; }
.invisivel-revelacao-simbolo .palavra {
  font-size: .56rem; color: #d4c8a8; margin-top: 2px; max-width: 70px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; top: 64px;
}
.invisivel-revelacao-eu {
  position: absolute; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(212,175,106,.22), rgba(18,18,32,.97));
  border: 1.5px solid rgba(212,175,106,.65); border-radius: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Jost', sans-serif; font-size: .8rem; color: #d4af6a;
}

/* ── Camadas da devolutiva — mesmo papel de vinculos-camada ── */
.invisivel-camada { margin-bottom: 2.2rem; }
.invisivel-camada-label {
  font-family: 'Jost', sans-serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: #a0a0d0; opacity: .8; margin-bottom: .7rem;
}
.invisivel-camada-texto {
  font-size: 1.08rem; line-height: 1.95; color: #e0e0f0; font-family: 'Georgia', serif;
}
.invisivel-devolutiva-texto {
  font-size: 1.05rem; line-height: 1.85; color: #e0e0f0; font-style: italic;
  padding: 1.5rem; background: rgba(140,140,200,.05); border-radius: 8px;
  margin-bottom: 1.5rem; white-space: pre-line;
}
.invisivel-chispa {
  font-size: .95rem; line-height: 1.7; color: #c8c0d8;
  padding: 1.2rem 1.5rem; border-left: 2px solid rgba(212,175,106,.35);
  margin-bottom: 2rem; font-style: italic; white-space: pre-line;
}

/* ── Leitura Ampliada — identidade visual deliberadamente distinta:
   tom âmbar/cobre, não o roxo-frio do resto da Travessia, para
   sinalizar visualmente "isto é outra voz, de outra natureza". ── */
.invisivel-leitura-ampliada-aviso {
  background: rgba(196,140,90,.06); border: 1px solid rgba(196,140,90,.22);
  border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem;
}
.invisivel-leitura-ampliada-aviso p {
  font-size: .85rem; line-height: 1.6; color: #d4b896; font-style: italic; margin: 0;
}
.invisivel-leitura-ampliada-texto {
  font-size: 1.04rem; line-height: 1.9; color: #ecdcc8;
  padding: 1.5rem; background: rgba(196,140,90,.05); border-radius: 8px;
  border-left: 2px solid rgba(196,140,90,.4); white-space: pre-line;
}

/* ── Escolha do tema — grid igual ao de vínculos, paleta nova ── */
.invisivel-temas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.5rem 0 2rem; }
@media (max-width: 480px) { .invisivel-temas-grid { grid-template-columns: 1fr; } }
.invisivel-tema-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(140,140,200,.15);
  border-radius: 8px; padding: 20px 16px; text-align: center;
  cursor: pointer; transition: all .25s ease;
}
.invisivel-tema-card:hover, .invisivel-tema-card.selecionado {
  border-color: rgba(140,140,200,.5); background: rgba(140,140,200,.06); transform: translateY(-2px);
}
.invisivel-tema-icone { font-size: 1.8rem; margin-bottom: 8px; }
.invisivel-tema-nome { font-size: .95rem; color: #e0e0f0; font-family: 'Jost', sans-serif; }
.invisivel-tema-outro-input {
  width: 100%; margin-top: 12px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(140,140,200,.2); border-radius: 6px;
  color: #e0e0f0; padding: 10px 14px; font-family: inherit; font-size: .95rem;
  box-sizing: border-box;
}
.invisivel-modo-aviso {
  text-align: center; font-size: .85rem; color: rgba(168,168,192,.75);
  line-height: 1.7; margin: 1rem auto 1.5rem; max-width: 480px;
}

.oculto { display: none !important; }