/* static/css/corpo9.css
   Versão adaptada para blocos renomeados para evitar conflitos genéricos.
   Escopo: tudo aqui afeta apenas o bloco_9_index (prefixo bloco_9_index-).
   Cole este arquivo em static/css/corpo9.css
*/

/* Reset & base */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #0f1720;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Ajuste estas variáveis conforme o tamanho real dos seus includes */
:root {
  --leftbar-width: 64px;
  --rightbar-width: 220px;
  --topbar-height: 36px;
  --bottombar-height: 20vh;
  --panel-gap: 12px;
  --panel-bg: transparent;
  --panel-radius: 8px;
  --frame-z: 40;    /* z-index da moldura */
  --track-z: 10;    /* z-index do track - deve ficar abaixo da moldura */
}

/* ------------------------------------------------------------------
   Escopo: tudo abaixo afeta somente o bloco_9_index (prefixo bloco_9_index-).
   ------------------------------------------------------------------ */

/* ---------- SEÇÃO HORIZONTAL (Bloco 9 - escopo atualizado) ---------- */
.bloco_9_index-demo .bloco_9_index-secao-horizontal {
  position: relative;
  width: 100%;
}

/* viewport fixa: fica preso na viewport enquanto o usuário "percorre" a seção.
   overflow:hidden é necessário para a técnica sticky+translate funcionar
   sem criar scrolls internos visíveis. */
.bloco_9_index-demo .bloco_9_index-viewport-fixa {
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* --- MOLDURA (overlay) — absoluto dentro do viewport-fixa */
.bloco_9_index-demo .bloco_9_index-moldura-visual {
  position: absolute;
  inset: 0;
  z-index: var(--frame-z);
  pointer-events: none;
  display: block;
}

.bloco_9_index-demo .bloco_9_index-moldura-visual.hidden {
  display: none;
}

/* grid visual da moldura */
.bloco_9_index-demo .bloco_9_index-moldura-interna {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--leftbar-width) 1fr var(--rightbar-width);
  grid-template-rows: var(--topbar-height) 1fr var(--bottombar-height);
  gap: 0;
  height: 100%;
  width: 100%;
  overflow: visible; /* overlay não deve cortar o conteúdo do track */
  z-index: calc(var(--frame-z) + 1);
  pointer-events: none;
  min-height: 0;
  min-width: 0;
}

/* partes interativas da moldura (as includes podem conter elementos interativos) */
.bloco_9_index-demo .bloco_9_index-parte-moldura-topo,
.bloco_9_index-demo .bloco_9_index-parte-moldura-esquerda,
.bloco_9_index-demo .bloco_9_index-parte-moldura-direita,
.bloco_9_index-demo .bloco_9_index-parte-moldura-rodape {
  pointer-events: auto;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  z-index: calc(var(--frame-z) + 2);
}

/* grid placement para os containers da moldura (IDs únicos) */
.bloco_9_index-demo #bloco_9_index-moldura-topo-container {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.bloco_9_index-demo #bloco_9_index-moldura-esquerda-container {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}

.bloco_9_index-demo #bloco_9_index-moldura-direita-container {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.bloco_9_index-demo #bloco_9_index-moldura-rodape-container {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

/* --- FAIXA (track) e PAINÉIS: faixa absoluta dentro do viewport-fixa preenchendo o "buraco" */
.bloco_9_index-demo #bloco_9_index-faixa,
.bloco_9_index-demo .bloco_9_index-faixa {
  position: absolute;
  top: var(--topbar-height);
  left: var(--leftbar-width);
  right: var(--rightbar-width);
  bottom: var(--bottombar-height);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--panel-gap);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: none;
  z-index: var(--track-z);
  pointer-events: auto;
  overflow: visible;
  min-height: 0;
}

/* painel ocupa 100% da altura da faixa (JS ajusta largura).
   Nome da classe de painel agora é bloco_9_index-painel */
.bloco_9_index-demo .bloco_9_index-painel {
    height: 100%;
    max-width: none;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
    font-size: 1.6rem;
    min-width: 0;
    min-height: 0;
    background: var(--panel-bg);
    border-radius: var(--panel-radius);
    padding: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  }

/* conteúdo do painel: sem scroll interno (overflow gerenciado externamente) */
.bloco_9_index-demo .bloco_9_index-conteudo-panel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  overflow: hidden; /* evita barras internas */
  padding: 0;
  min-height: 0;
  min-width: 0;
}

/* Segurança: força filhos a respeitarem largura do painel e quebrar textos longos */
.bloco_9_index-demo .bloco_9_index-conteudo-panel > * {
  box-sizing: border-box;
  max-width: 100%;
  word-wrap: break-word;
}

/* Imagens / vídeos: limitados para evitar overflow horizontal/vertical */
.bloco_9_index-demo .bloco_9_index-conteudo-panel img,
.bloco_9_index-demo .bloco_9_index-conteudo-panel picture,
.bloco_9_index-demo .bloco_9_index-conteudo-panel video {
  display: block;
  height: auto;
  object-fit: contain;
}

/* Iframes: limitar largura e altura. Se precisar de iframe que role internamente,
   reabilite overflow:auto especificamente no container do iframe. */
.bloco_9_index-demo .bloco_9_index-painel iframe {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
}

/* variações por painel (se você tiver painéis específicos, use sufixos com o prefixo bloco_9_index-) */
.bloco_9_index-demo .bloco_9_index-painel-1 {
  background: transparent;
  display: flex;
  padding: 0;
}

.bloco_9_index-demo .bloco_9_index-painel-3 {
  background: #0c0a0a;
}

/* status bar (se usada) — local ao bloco_9_index */
.bloco_9_index-demo .bloco_9_index-status-bar {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  color: #9aa4ad;
  font-size: 12px;
}

/* mensagens de erro / fallback (local para bloco_9_index) */
.bloco_9_index-demo .bloco_9_index-erro-carregamento {
  padding: 8px 12px;
  background: rgba(255, 0, 0, 0.06);
  color: #ffb3b3;
  border-radius: 6px;
  font-size: 13px;
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1000;
}

.bloco_9_index-demo .bloco_9_index-erro-carregamento.visible {
  display: block;
}

/* Estilos visuais opcionais para as partes da moldura */
.bloco_9_index-demo #bloco_9_index-moldura-esquerda-container {
  background: rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.02);
}

.bloco_9_index-demo #bloco_9_index-moldura-rodape-container {
  background: rgba(0, 0, 0, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.02);
}

/* Responsivo: reduz larguras/alturas em telas pequenas */
@media (max-width: 900px) {
  :root {
    --rightbar-width: 200px;
    --leftbar-width: 56px;
    --bottombar-height: 20vh;
    --topbar-height: 56px;
  }
}

/* Utilitários de depuração (comente/descomente conforme necessário) */
/*
.bloco_9_index-demo .bloco_9_index-moldura-interna { outline: 1px dashed rgba(255,255,255,0.03); }
.bloco_9_index-demo .bloco_9_index-faixa { outline: 1px dashed rgba(0,255,0,0.04); }
*/

/* animação de esconder/mostrar header (global do site — mantive inalterado) */
.site-header {
  transition: transform 280ms ease, opacity 200ms ease;
}

/* classe aplicada quando o bloco está visível e header deve ser ocultado */
.site-header--hidden {
  transform: translateY(-300%); /* move para cima */
}