/* ==================== FAIXA (HEADER) ==================== */

.ribbon{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);            /* 60px */
  display: grid; place-items: center;
  z-index: 3;
  background: #0E1822;                /* cor base da faixa */
  transition: height .5s ease-in-out;   /* <── aqui! */
}

.ribbon .ribbon-inner{
  width: min(100%, var(--container-max));
  margin: 0 auto;
  height: var(--header-h);     /* fixa 60px mesmo com a faixa expandida */
  display: grid;
  place-items: center;
  align-self: start;
}

.logo-ci{
  height: 38px;
  width: auto;
}


.logo-ci-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;       /* remove o espaço fantasma vertical */
}

.logo-ci-link img{
  display: block;       /* remove baseline da imagem */
}




/* Estado expandido (vamos usar quando abrir LISTA/FILTRO) */
.ribbon[data-state="open"]{
  height: 90vh;                      /* painel ocupa a tela toda */
  transition: height 0.5s ease-in-out;
  background: #0E1822;                /* leve variação pra diferenciar */
}