/* ============================================================
   vinculos.css — Travessia dos Vínculos
   Sobrescreve jornada.css (mesmo padrão de sonhos.css): reaproveita
   a estrutura geral (.jornada-body, .jornada-container, .jornada-
   topbar, .rito-header, .btn-jornada-principal/avancar, .btn-rever,
   .guardiao-loader) e troca só a paleta de cor — um tom rosé-cobre,
   mais quente que o azul de jornadas e o índigo de sonhos, coerente
   com o tema de relação e vínculo humano.

   Componentes exclusivos de vínculos (grid de temas com aura sutil
   por hover, símbolos sorteados, mapa espacial com drag-and-drop)
   ficam na segunda parte deste arquivo, com namespace próprio.
   ============================================================ */

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

/* Barra de navegação superior — jornada.css NÃO centraliza isso
   (cada página de /jornadas/ repete o CSS inline com sua própria
   cor); sonhos.css resolve definindo uma vez para todo o módulo.
   Fazemos o mesmo aqui — sem isso, a topbar aparece como texto cru,
   sem position:fixed nem cor. */
.jornada-topbar {
  position: fixed; top: 0; left: 0; right: 0; padding: .5rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(23,13,18,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.04); z-index: 50;
}
.topbar-logo { font-size: .8rem; letter-spacing: .15em; color: #c9968a; text-decoration: none; opacity: .7; }
.topbar-dash { font-size: .75rem; letter-spacing: .1em; color: #9a7268; text-decoration: none; transition: color .2s; }
.topbar-dash:hover { color: #c9b0a8; }

/* Divisor simples — usado entre blocos de conteúdo; também não
   existe em jornada.css, então definimos aqui. */
.divider { border: none; border-top: 1px solid rgba(255,255,255,.08); }

.vinculos-body .btn-jornada-iniciar,
.vinculos-body .btn-jornada-principal {
  background: rgba(201,150,138,.18); border-color: rgba(201,150,138,.35); color: #f0e4dc;
}
.vinculos-body .btn-jornada-iniciar:hover,
.vinculos-body .btn-jornada-principal:hover { background: rgba(201,150,138,.28); }
.vinculos-body .btn-jornada-avancar { color: #b89a92; border-color: rgba(255,255,255,.15); }
.vinculos-body .btn-jornada-avancar:hover { border-color: rgba(201,150,138,.4); color: #e8d8d2; }

.vinculos-body .jornada-mare-badge {
  background: rgba(201,150,138,.15); border-color: rgba(201,150,138,.3); color: #c9968a;
}
.vinculos-body .jornada-titulo-mare { color: #e8d8d2; }
.vinculos-body .rito-carta-nome,
.vinculos-body .vinculos-subtitulo { color: #c9968a; }
.vinculos-body .progress-fill,
.vinculos-body .barra-progresso-fill { background: linear-gradient(90deg,#7a3a3a,#c9968a); }
.vinculos-body .etapa-label-pequeno,
.vinculos-body .devolutiva-label { color: #c9968a; }
.vinculos-body .devolutiva-texto { background: rgba(201,150,138,.06); color: #e8d8d2; }
.vinculos-body .guardiao-loader .loader-ondas span { background: #c9968a; }
.vinculos-body .topbar-logo { color: #c9968a; }
.vinculos-body .silencio-convite { color: #b89a92; }
.vinculos-body .silencio-countdown .countdown-progresso,
.vinculos-body .countdown-progresso { stroke: #c9968a; }
.vinculos-body .countdown-trilha { stroke: rgba(201,150,138,.1); }

/* ============================================================
   Componentes exclusivos de Vínculos
   ============================================================ */

/* ── Escolha do tema (index.php) ───────────────────────────
   Cada card ganha uma aura sutil e quase imperceptível no hover/
   seleção — não uma cor diferente forte, só um leve glow que sugere
   identidade própria sem romper a unidade da paleta. */
.vinculos-temas-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 480px) { .vinculos-temas-grid { grid-template-columns: 1fr; } }
.vinculos-tema-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(201,150,138,.15);
  border-radius: 8px; padding: 20px 16px; text-align: center;
  cursor: pointer; transition: all .25s ease;
}
.vinculos-tema-card:hover, .vinculos-tema-card.selecionado {
  border-color: rgba(201,150,138,.5); transform: translateY(-2px);
}
.vinculos-tema-card[data-tema="familia"]:hover,        .vinculos-tema-card[data-tema="familia"].selecionado        { background: rgba(201,150,138,.07); } /* cobre suave */
.vinculos-tema-card[data-tema="amor"]:hover,            .vinculos-tema-card[data-tema="amor"].selecionado            { background: rgba(196,142,140,.07); } /* rosé dourado */
.vinculos-tema-card[data-tema="trabalho"]:hover,        .vinculos-tema-card[data-tema="trabalho"].selecionado        { background: rgba(150,110,70,.07); }  /* bronze */
.vinculos-tema-card[data-tema="dinheiro"]:hover,        .vinculos-tema-card[data-tema="dinheiro"].selecionado        { background: rgba(180,150,90,.07); }  /* dourado antigo */
.vinculos-tema-card[data-tema="proposito"]:hover,       .vinculos-tema-card[data-tema="proposito"].selecionado       { background: rgba(190,160,100,.07); } /* dourado claro */
.vinculos-tema-card[data-tema="conflito"]:hover,        .vinculos-tema-card[data-tema="conflito"].selecionado        { background: rgba(140,90,80,.07); }   /* cobre fechado */
.vinculos-tema-card[data-tema="decisao_dificil"]:hover, .vinculos-tema-card[data-tema="decisao_dificil"].selecionado { background: rgba(160,120,100,.07); } /* cobre-bronze */
.vinculos-tema-card[data-tema="outro"]:hover,           .vinculos-tema-card[data-tema="outro"].selecionado           { background: rgba(201,150,138,.07); } /* cobre suave */
.vinculos-tema-icone { font-size: 1.8rem; margin-bottom: 8px; }
.vinculos-tema-nome { font-size: .95rem; color: #e8d8d2; font-family: 'Jost', sans-serif; }
.vinculos-tema-outro-input {
  width: 100%; margin-top: 12px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,150,138,.2); border-radius: 6px;
  color: #e8d8d2; padding: 10px 14px; font-family: inherit; font-size: .95rem;
  box-sizing: border-box;
}
.vinculos-modo-aviso {
  text-align: center; font-size: .93rem; color: rgba(232,216,210,.9);
  line-height: 1.7; margin: 1rem auto 1.5rem; max-width: 480px;
}

/* ── Bloco de acesso: 2 colunas lado a lado (travessia / reflexão),
   cada uma no próprio quadro — em vez de empilhar tudo pra baixo. ── */
.vinculos-acesso-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1rem;
}
@media (max-width: 560px) { .vinculos-acesso-grid { grid-template-columns: 1fr; } }
.vinculos-acesso-col {
  background: rgba(255,255,255,.03); border: 1px solid rgba(201,150,138,.18);
  border-radius: 10px; padding: 1.4rem 1.2rem; text-align: center;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.vinculos-acesso-col .vinculos-modo-aviso { margin: .8rem 0 0; }

/* ── Símbolos sorteados e nomeação ──────────────────────── */
.vinculos-simbolos-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 480px) { .vinculos-simbolos-grid { grid-template-columns: repeat(2, 1fr); } }
.vinculos-simbolo-item {
  background: rgba(255,255,255,.02); border: 1px solid rgba(201,150,138,.15);
  border-radius: 10px; padding: 16px 8px; text-align: center;
}
.vinculos-simbolo-forma { font-size: 2rem; color: #c9968a; margin-bottom: 10px; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; line-height: 1; }
.vinculos-simbolo-input {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(201,150,138,.2);
  border-radius: 6px; color: #e8d8d2; padding: 6px 8px; font-family: inherit;
  font-size: .85rem; text-align: center; box-sizing: border-box;
}
.vinculos-simbolo-input::placeholder { color: rgba(184,154,146,.5); }
.vinculos-simbolo-input:focus { outline: none; border-color: rgba(201,150,138,.5); }

/* ── Mapa espacial (drag-and-drop) ──────────────────────── */
.vinculos-mapa-area {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 1;
  margin: 1.5rem auto 1rem; border-radius: 50%;
  border: 1px dashed rgba(201,150,138,.25);
  background: radial-gradient(circle, rgba(201,150,138,.04) 0%, transparent 70%);
  touch-action: none;
}
.vinculos-mapa-centro {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,150,138,.35); border-radius: 50%;
  border: 1.5px solid rgba(201,150,138,.6);
  box-shadow: 0 0 0 4px rgba(201,150,138,.1);
  transform: translate(-50%, -50%); pointer-events: none;
}
.vinculos-mapa-centro::after {
  content: 'EU'; font-size: .78rem; color: #e4c88c;
  font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: .05em;
}
.vinculos-simbolo-arrastavel {
  position: absolute; width: 52px; height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(23,13,18,.95); border: 1px solid rgba(201,150,138,.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;
}
.vinculos-simbolo-arrastavel:active { cursor: grabbing; box-shadow: 0 0 0 4px rgba(201,150,138,.15); }
.vinculos-simbolo-arrastavel.arrastando { border-color: #c9968a; z-index: 10; }
.vinculos-simbolo-arrastavel .forma { font-size: 1.05rem; color: #c9968a; line-height: 1; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; }
.vinculos-simbolo-arrastavel .nome {
  font-size: .52rem; color: #e8d8d2; margin-top: 2px; max-width: 46px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vinculos-mapa-instrucao {
  text-align: center; font-size: .85rem; color: rgba(184,154,146,.7);
  margin-bottom: .5rem; font-style: italic;
}

/* ── Mapa revelado (ver.php) ────────────────────────────── */
/* Mesma área e mesma convenção de centralização do mapa de
   arrasto (.vinculos-mapa-area / .vinculos-simbolo-arrastavel) —
   precisa espelhar position:relative e o translate(-50%,-50%),
   senão left/top em % não cai no mesmo ponto onde a pessoa soltou
   o símbolo durante a travessia. */
.vinculos-revelacao-mapa {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 1;
  margin: 1.5rem auto 1rem; border-radius: 50%;
  border: 1px dashed rgba(201,150,138,.25);
  background: radial-gradient(circle, rgba(201,150,138,.04) 0%, transparent 70%);
}
.vinculos-revelacao-simbolo {
  position: absolute; width: 52px; height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(23,13,18,.95); border: 1px solid rgba(201,150,138,.4);
  border-radius: 50%; transform: translate(-50%, -50%);
}
.vinculos-revelacao-simbolo .forma { font-size: 1.3rem; color: #c9968a; line-height: 1; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; }
.vinculos-revelacao-simbolo .nome {
  font-size: .52rem; color: #e8d8d2; margin-top: 2px; max-width: 46px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Perguntas contemplativas ───────────────────────────── */
.vinculos-pergunta-bloco { margin-bottom: 1.8rem; }
.vinculos-pergunta-numero {
  text-align: center; font-size: .75rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(201,150,138,.5);
  margin-bottom: .6rem; font-family: 'Jost', sans-serif;
}
.vinculos-pergunta-texto {
  font-size: 1.15rem; color: #e8d8d2; font-style: italic;
  line-height: 1.6; margin-bottom: 1rem; text-align: center;
}
.vinculos-resposta-textarea {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(201,150,138,.15);
  border-radius: 6px; color: #e8d8d2; font-size: 1rem; line-height: 1.7;
  padding: 1rem; resize: vertical; font-family: inherit; box-sizing: border-box;
  min-height: 90px;
}
.vinculos-resposta-textarea:focus { outline: none; border-color: rgba(201,150,138,.5); }

/* ── Devolutiva final ───────────────────────────────────── */
.vinculos-devolutiva-texto {
  font-size: 1.05rem; line-height: 1.8; color: #e8d8d2; font-style: italic;
  padding: 1.5rem; background: rgba(201,150,138,.05); border-radius: 8px;
  margin-bottom: 1.5rem; white-space: pre-line;
}
.vinculos-chispa {
  font-size: .95rem; line-height: 1.7; color: #c9b0a8;
  padding: 1.2rem 1.5rem; border-left: 2px solid rgba(201,150,138,.3);
  margin-bottom: 2rem; font-style: italic; white-space: pre-line;
}

/* Devolutiva do Guardião — "o espelho humano da travessia": mais
   íntima que a Leitura, sem moldura formal. Itálico suave,
   levemente recolhida, como uma fala dirigida ao viajante. */
.vinculos-devolutiva-viajante {
  font-size: 1.02rem; line-height: 1.9; color: #e0c8be; font-style: italic;
  padding-left: 1.2rem; border-left: 1px solid rgba(201,150,138,.25);
  margin-bottom: 1.5rem; white-space: pre-line;
}

/* Maré Oculta — contemplativa, quase poética: centralizada,
   espaçada, sem moldura nem fundo — só presença. */
.vinculos-mare-oculta {
  font-size: 1rem; line-height: 1.9; color: #b89a92; font-style: italic;
  text-align: center; max-width: 480px; margin: 0 auto 2rem; white-space: pre-line;
}
.vinculos-camada--mare-oculta { text-align: center; }
.vinculos-camada--mare-oculta .vinculos-camada-label { color: #8a9fb8; opacity: .7; }

/* Botão "Sentir a Maré Oculta" — discreto de propósito, não é uma
   CTA; a pessoa só clica se quiser continuar, nunca é empurrado. */
.btn-mare-oculta {
  background: none; border: 1px solid rgba(138,159,184,.35); color: #8a9fb8;
  font-family: 'Jost', sans-serif; font-size: .82rem; letter-spacing: .08em;
  padding: .7rem 1.6rem; border-radius: 3px; cursor: pointer; transition: .2s;
}
.btn-mare-oculta:hover { background: rgba(138,159,184,.08); }
.btn-mare-oculta:disabled { opacity: .5; cursor: default; }

.vinculos-conchas-toast {
  text-align: center; font-size: .85rem; color: #c9968a;
  margin-bottom: 1.5rem; font-family: 'Jost', sans-serif; letter-spacing: .03em;
}

/* ── Camadas da leitura em ver.php — mesmo papel de .sonhos-camada
   em sonhos.css, com nome e cor próprios de vínculos. ──────── */
.vinculos-titulo-sugerido {
  text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem;
  color: #e8d8d2; font-style: italic; margin-bottom: 2rem;
}
.vinculos-camada { margin-bottom: 2.2rem; }
.vinculos-camada-label {
  font-family: 'Jost', sans-serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: #c9968a; opacity: .75; margin-bottom: .7rem;
}
.vinculos-camada-texto {
  font-size: 1.08rem; line-height: 1.95; color: #e8d8d2; font-family: 'Georgia', serif;
}
.vinculos-camada--chispa .vinculos-camada-label { color: #d4af6a; }
.vinculos-camada--chispa .vinculos-camada-texto {
  padding: 1.4rem; background: rgba(212,175,106,.07); border-left: 2px solid rgba(212,175,106,.4);
  border-radius: 4px; font-style: normal;
}
.vinculos-camada--devolutiva-viajante .vinculos-camada-label { color: #c9968a; opacity: .9; }

/* Corpo de texto contemplativo genérico, e o título principal sem
   modificador (jornada-titulo já dá o tamanho/peso — aqui só
   garantimos a cor correta do módulo). */
.vinculos-texto { color: #b89a92; line-height: 1.55; font-size: 1.05rem; }
.vinculos-titulo { color: #e8d8d2; }

/* Encerramento / ações finais (ver.php) e link simples de navegação */
.encerramento-acoes { text-align: center; }
.encerramento-conchas {
  text-align: center; background: rgba(201,150,138,.08); border: 1px solid rgba(201,150,138,.25);
  border-radius: 8px; padding: .8rem 1rem; font-size: .9rem; color: #c9968a;
}
.concha-icone { margin-right: .3rem; }
.link-dashboard {
  text-align: center; font-size: .85rem; color: #9a7268; text-decoration: none;
}
.link-dashboard:hover { color: #c9b0a8; }

/* ── Caderno do Mar Interno — overlay paralelo ─────────────
   Opacidade pensada para deixar ver o fundo da Travessia (não é um
   modal opaco e isolante) — a pessoa sente que ainda está "dentro"
   da experiência, só abriu uma página do caderno por cima. */
.vinculos-caderno-overlay {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(23,13,18,.78);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.vinculos-caderno-caixa {
  background: rgba(30,17,22,.97); border: 1px solid rgba(201,150,138,.25);
  border-radius: 12px; padding: 2rem; max-width: 520px; width: 100%;
  max-height: 88vh; overflow-y: auto; position: relative;
}
.vinculos-caderno-fechar {
  position: absolute; top: 1rem; right: 1.2rem; background: none; border: none;
  color: #b89a92; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.vinculos-caderno-fechar:hover { color: #e8d8d2; }
.vinculos-caderno-label {
  font-family: 'Jost', sans-serif; font-size: .75rem; letter-spacing: .15em;
  text-transform: uppercase; color: #c9968a; opacity: .8; margin-bottom: 1rem;
  text-align: center;
}
.vinculos-caderno-titulo-input {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(201,150,138,.18);
  border-radius: 6px; color: #e8d8d2; padding: .7rem .9rem; font-family: inherit;
  font-size: .95rem; margin-bottom: .8rem; box-sizing: border-box;
}
.vinculos-caderno-titulo-input:focus { outline: none; border-color: rgba(201,150,138,.5); }
.vinculos-caderno-textarea {
  width: 100%; min-height: 220px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,150,138,.18); border-radius: 6px; color: #e8d8d2;
  font-family: 'Georgia', serif; font-size: 1.02rem; line-height: 1.8;
  padding: 1rem; resize: vertical; box-sizing: border-box;
}
.vinculos-caderno-textarea:focus { outline: none; border-color: rgba(201,150,138,.5); }
.vinculos-caderno-acoes { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }

/* Últimas entradas, dentro do mesmo overlay — abrir para editar ou
   excluir, sem precisar ir ao dashboard. */
.vinculos-caderno-recentes {
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(201,150,138,.12);
}
.vinculos-caderno-recentes-label {
  font-family: 'Jost', sans-serif; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(201,150,138,.55); margin-bottom: .7rem;
}
.vinculos-caderno-recentes-vazio { font-size: .82rem; color: rgba(184,154,146,.6); text-align: center; padding: .6rem 0; }
.vinculos-caderno-recente-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.vinculos-caderno-recente-item:last-child { border-bottom: none; }
.vinculos-caderno-recente-texto { flex: 1; cursor: pointer; }
.vinculos-caderno-recente-texto:hover .vinculos-caderno-recente-titulo { color: #c9968a; }
.vinculos-caderno-recente-titulo { font-size: .9rem; color: #e8d8d2; margin-bottom: 2px; transition: color .2s; }
.vinculos-caderno-recente-resumo {
  font-size: .78rem; color: rgba(184,154,146,.65); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vinculos-caderno-recente-excluir {
  background: none; border: none; color: rgba(184,154,146,.4); cursor: pointer;
  font-size: .9rem; padding: 2px 4px; transition: color .2s; flex-shrink: 0;
}
.vinculos-caderno-recente-excluir:hover { color: #e88a8a; }