/* ===================== VARS GERAIS ===================== */
:root{
  --container-max: 1440px;
  --menu-offset: 55px;            /* distância do menu para a borda ESQUERDA do container */
  --menu-btn: 80px;      /* largura do botão */
  --menu-gap: 20px;      /* espaço que quer deixar entre botões e texto */
  --header-h: 60px;               /* altura da faixa recolhida */
  --banner-w: 468px;
  --banner-h: 633px;
  --container-left: calc((100vw - min(100vw, var(--container-max)))/2);
  --container-pad: 24px; /* padding horizontal padrão do container */

  --ink: #E8EEF6;                 /* cor base do texto na home */
}

/* Reset mínimo */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
  overflow: hidden; /* Home sem rolagem */
  position: relative;
}

/* ===== BG full-screen ===== */
.bg{
  position: fixed; inset: 0;
  background: #000 url('../../assets/bg.png') center/cover no-repeat; 
  z-index: -2;
}

/* ===== Logo W (canto inferior esquerdo) ===== */
.logo-w{
  position: fixed;
  left: clamp(12px, calc(50% - var(--container-max)/2 + 16px), 40px);
  bottom: 16px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
}
.logo-w img{ position: absolute; width: 100%; height: 100%; object-fit: contain; }
.logo-w .w-on{ opacity: 0; transition: opacity .18s ease; }
.logo-w:hover .w-on{ opacity: 1; }
.logo-w:hover .w-off{ opacity: 0; }

/* ===== Menu lateral (posicionado relativo ao container) ===== */
.menu-lateral{
  position: fixed;
  left: calc(var(--container-left) + var(--menu-offset));
  top: 53%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  z-index: 6;                     /* acima da faixa/painel */
}

/* ===== Layout da Home ===== */
.home{
  height: 100vh;                  /* sem rolagem */
  display: grid;
  place-items: center;
  padding-top: var(--header-h);
}
.container{
  width: min(100%, var(--container-max));
  margin: 0 auto;
  /* reserva espaço pro menu lateral + um respiro */
  padding: 0 24px 0 calc(var(--menu-offset) + var(--menu-btn) + var(--menu-gap) + 10px);
  display: grid;
  grid-template-columns: 1fr auto;/* texto | banner */
  align-items: center;
  gap: 48px;
  z-index: 5;   
}

/* Títulos e tipografia */
.title{
  margin: 0 0 10px 0;
  line-height: 1.05;
}
.title .tabela{
  display: block;
  font: 600 32px/1 'Open Sans', sans-serif; /* semibold 32 */
  letter-spacing: -0.05em;
}
.title .protocolos{
  display: block;
  font: 700 64px/1.05 'Open Sans', sans-serif; /* bold 64 */
  letter-spacing: -0.05em;
}
.title .ano{
  display: inline-block;
  margin-left: 3px;
  font: 700 64px/1 'Quantico', sans-serif;
  letter-spacing: -0.05em;
  color: #8CFF70;
}
.break{ display: none; }          /* quebra opcional para telas menores */






/* Quando LISTA/FILTRO abre, o .title vira “mini” no topo-esquerdo do container */
.ribbon[data-state="open"] ~ .home .title{
  position: absolute;
  top: 12px;
  left: calc(
    var(--container-left)         /* borda esquerda do container centralizado */
    + var(--menu-offset)          /* distância até o menu */
    + var(--menu-btn)             /* largura do botão */
    + var(--menu-gap)             /* respiro entre botão e texto */
    + var(--container-pad)        /* padding interno do container */
  );
  margin: 0;
  z-index: 6;                     /* sobre o conteúdo da faixa/painel */
  line-height: 1.2;
}

/* 3 linhas exatamente como você pediu */
.ribbon[data-state="open"] ~ .home .title .tabela{
  display: block;                 /* Linha 1: “Tabela” */
  font: 600 14px/1.2 'Open Sans', sans-serif;
  margin-bottom: 2px;
}

.ribbon[data-state="open"] ~ .home .title .protocolos{
  display: block;                 /* Linha 2: “Protocolos de” */
  font: 700 20px/1.2 'Open Sans', sans-serif;
  margin-bottom: 2px;
  /* se precisar forçar a quebra pra “Comunicação 2025” ir na 3ª linha, use: */
  max-width: 230px;               /* ajuste fino conforme o seu layout */
}

.ribbon[data-state="open"] ~ .home .title .ano{
  /* Linha 3: “Comunicação 2025” (o 2025 segue verde) */
  margin-left: 3px;
  font: 700 20px/1 'Quantico', sans-serif;
  color: #71F27A;                 /* use a mesma cor da home */
}
.ribbon[data-state="open"] ~ .home .title .break{ display:none !important; } /* ignora <br> da versão grande */



.subtitle{
  max-width: 780px;
  font: 400 18px/1.55 'Open Sans', sans-serif;   /* regular 18 */
  margin: 0;
  opacity: .95;
  letter-spacing: -0.05em;
}

/* Banner à direita */
.banner{
  position: relative;
  width: var(--banner-w);
  height: var(--banner-h);

  /* 👉 duas linhas: 1) selo  2) imagem */
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
.banner img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* imagem fica dentro sem cortar */
}
.banner .selo{
  order: 1;
  margin: 4px 0 8px 0;
  font-size: 12px;
  opacity: .5;
  text-align: center;
}

/* ===== removendo o banner com o painel aberto ===== */
body.panel-open .banner {
  display: none;
}

body.panel-open .container {
  grid-template-columns: 1fr;
}

/* ===== Responsivo web básico ===== */
@media (max-width: 1440px) {
  .ribbon[data-state="open"] ~ .home .title {
    left: clamp(
      calc(16px + var(--menu-offset) + var(--menu-btn) + var(--menu-gap) + var(--container-pad)),
      calc(50% - var(--container-max) / 2 + var(--menu-offset) + var(--menu-btn) + var(--menu-gap) + var(--container-pad)),
      calc(48px + var(--menu-offset) + var(--menu-btn) + var(--menu-gap) + var(--container-pad))
    );
  }

  .menu-lateral {
    left: clamp(16px, calc(50% - var(--container-max) / 2 + var(--menu-offset)), 48px);
  }

  .container {
    padding-left: clamp(
      /* mínimo: quando grudar na borda com 16px */
      calc(16px + var(--menu-btn) + var(--menu-gap) + var(--container-pad)),
      /* valor ideal: borda do container + offset + botão + gap + pad interno */
      calc(50% - var(--container-max) / 2 + var(--menu-offset) + var(--menu-btn) + var(--menu-gap) + var(--container-pad)),
      /* máximo: quando limitar em 48px */
      calc(48px + var(--menu-btn) + var(--menu-gap) + var(--container-pad))
    );

    /* mantém o pad direito normal */
    padding-right: var(--container-pad);
  }
}

@media (max-width: 1200px){
  .container{ gap: 32px; }
  .banner{ transform: scale(.9); transform-origin: right center; }
}
@media (max-width: 1024px){
  .title .protocolos{ font-size: 52px; }
  .title .ano{ font-size: 52px; }
  .subtitle{ font-size: 17px; }
  .banner{ transform: scale(.8); }
  .break{ display: inline; }
}





/* cabeçalho */
.proto-head { margin: 0 0 16px; }
.proto-title { font-weight: 700; font-size: 22px; line-height: 1.2; }
.proto-sub { font-size: 14px; line-height: 1.3; opacity: .85; margin-top: 2px; }

/* se optar por link no site, deixe com aparência de texto */
.proto-sub a { text-decoration: none; color: inherit; }

/* seções */
.proto-sec { 
  font-weight: 700; 
  font-size: 22px; 
  line-height: 1.2; 
  margin: 24px 0 8px; 
}
.proto-txt { margin: 0 0 16px; }




/* ==== SCROLLBARS PERSONALIZADO ==== */

/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: #3d4757 #1a212c;
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track{
  background: #1a212c;       /* fundo escuro */
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb{
  background: #3d4757;       /* cor do thumb */
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover{
  background: #55627a;       /* hover elegante */
}