/* ============================================================================
   conteudo-editavel.css — a seção de conteúdo publicado pelo Editor Visual nas
   8 páginas estáticas (ver assets/conteudo-editavel.js).

   Cópia de src/styles/conteudo.css do projeto React (home): mesmas classes
   .render-*, mesmo ritmo das seções do site. Mudou um, muda o outro.
   Carregada por <link> — NÃO é embutida pelo embutir-tema.mjs.
   ========================================================================== */

.conteudo-editavel {
  padding: 100px 8%;
  background-color: #000000;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}
.conteudo-editavel[hidden] { display: none; }
.conteudo-editavel-coluna {
  max-width: 860px;
  margin: 0 auto;
}

.conteudo-editavel .render-titulo {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFD700;
  margin: 1.4em 0 0.5em;
}
.conteudo-editavel .render-titulo:first-child { margin-top: 0; }
.conteudo-editavel .render-titulo.nivel-1 { font-size: clamp(2rem, 3.6vw, 2.6rem); }
.conteudo-editavel .render-titulo.nivel-2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.conteudo-editavel .render-titulo.nivel-3 { font-size: clamp(1.25rem, 2vw, 1.5rem); color: #D4A373; }

.conteudo-editavel .render-paragrafo {
  margin: 0 0 1.2em;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--texto-claro, #e2e2e2);
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.conteudo-editavel .render-paragrafo a { color: #D4A373; text-decoration: underline; text-underline-offset: 3px; }
.conteudo-editavel .render-paragrafo a:hover { color: #FFD700; }
.conteudo-editavel .render-paragrafo b { color: #ffffff; }

.conteudo-editavel .render-figura { margin: 2em 0; }
.conteudo-editavel .render-figura img { display: block; max-width: 100%; margin: 0 auto; border-radius: 10px; }
.conteudo-editavel .render-figura.largura-larga img { width: calc(100% + 120px); max-width: none; margin-left: -60px; }
.conteudo-editavel .render-figura.largura-cheia img { width: calc(100% + 240px); max-width: none; margin-left: -120px; }
.conteudo-editavel .render-legenda { margin-top: 10px; font-size: 0.92rem; color: var(--texto-mutado, #9a9a9a); text-align: center; }
.conteudo-editavel .video-moldura { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a0a0a; border-radius: 10px; overflow: hidden; }
.conteudo-editavel .video-moldura iframe,
.conteudo-editavel .video-moldura video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 860px) {
  .conteudo-editavel { padding: 70px 6%; }
  .conteudo-editavel .render-figura.largura-larga img,
  .conteudo-editavel .render-figura.largura-cheia img { width: 100%; margin-left: 0; }
}

/* ---- modo prévia (dentro do Editor Visual, ?previa=1) ----------------------
   A seção fica sempre visível, com contorno tracejado dourado e um rótulo,
   para o editor ver ONDE o conteúdo entra; o bloco selecionado no editor
   ganha um halo. Cópia em src/styles/conteudo.css (home). */
.conteudo-editavel.em-previa {
  position: relative;
  outline: 1px dashed rgba(255, 215, 0, 0.55);
  outline-offset: -10px;
  min-height: 160px;
}
.conteudo-editavel .previa-rotulo {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 215, 0, 0.12); border: 1px solid rgba(255, 215, 0, 0.4);
  color: #FFD700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
}
.conteudo-editavel .previa-vazia {
  padding: 40px 24px; text-align: center;
  color: rgba(255, 255, 255, 0.45); font-size: 0.95rem;
  border: 1px dashed rgba(212, 163, 115, 0.45); border-radius: 12px;
}
.conteudo-editavel .bloco-destaque {
  outline: 2px solid rgba(255, 215, 0, 0.85);
  outline-offset: 8px;
  border-radius: 6px;
  box-shadow: 0 0 0 14px rgba(255, 215, 0, 0.06);
  transition: outline-color 0.2s, box-shadow 0.2s;
}

/* ---- campos (conteúdo original da página editado pelo editor) ------------
   `.campo-destaque`: o campo em edição, na simulação ao vivo. Cópia em
   src/styles/conteudo.css (home). */
.campo-destaque {
  outline: 2px solid rgba(255, 215, 0, 0.85) !important;
  outline-offset: 6px;
  border-radius: 6px;
  box-shadow: 0 0 0 12px rgba(255, 215, 0, 0.06);
  transition: outline-color 0.2s, box-shadow 0.2s;
}
/* ---- bloco "arquivo" (documento para baixar) ---- */
.conteudo-editavel .render-arquivo { margin: 1.2em 0; text-align: center; }
.conteudo-editavel .render-arquivo a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 10px;
  border: 1px solid rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.06);
  color: #FFD700; text-decoration: none; font-weight: 600;
}
.conteudo-editavel .render-arquivo a::before { content: "⎙"; font-size: 1.1em; }
.conteudo-editavel .render-arquivo a:hover { background: rgba(255, 215, 0, 0.14); }
.conteudo-editavel .render-documento { margin: 1.2em 0; }