/* ============================================================
   RÉGUA INSTITUCIONAL COMUM
   Idêntica em tela1.html, tela2.html e leitor.html: mesmos
   grupos, mesma ordem, mesmos labels laterais, mesma altura e
   mesmo comportamento responsivo.

   Ordem: Movimento Cultural · Reconhecimento (VivaLeitura, OEI,
   MinC, MEC) · Realização PNAB.

   Composição conforme orientação do cliente e o manual da SECOM
   para o período eleitoral.
   ============================================================ */

.regua-institucional {
  --ri-gap: clamp(0.55rem, 2vw, 1.75rem);
  position: relative;
  z-index: 12;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--ri-gap);
  width: 100%;
  min-height: 0;
  /* altura explícita, igual nas 3 páginas */
  height: clamp(62px, 7dvh, 82px);
  padding: clamp(0.28rem, 0.85dvh, 0.6rem) clamp(0.5rem, 1.8vw, 1.5rem);
  border-top: 1px solid rgba(20, 16, 8, 0.12);
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

.ri-grupo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 0.95rem);
  min-width: 0;
}

.ri-grupo__titulo {
  max-width: 12em;
  margin: 0;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  color: #5E5030;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.38rem, min(0.88vw, 0.88dvh), 0.56rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: right;
  text-transform: uppercase;
}

.ri-grupo__itens {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.42rem, 1.35vw, 1.15rem);
  min-width: 0;
}

.ri-marca {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.ri-marca--movimento { max-height: clamp(2.6rem, 7.6dvh, 4.6rem); }
.ri-marca--premio {
  /* Bloco oficial horizontal, com fundo azul próprio. Entra
     inteiro, sem recorte e sem remoção de fundo.
     RESPIRO: por ser o único elemento com fundo numa faixa
     branca cercada de marcas transparentes, ele ganha uma folga
     ao redor e cantos suaves, para ler como peça deliberada e
     não como remendo colado. */
  max-height: clamp(1.9rem, 5.4dvh, 3.2rem);
  margin: 0 clamp(0.3rem, 0.9vw, 0.7rem);
  border-radius: 0.3rem;
  box-shadow: 0 0 0 clamp(3px, 0.42vw, 6px) #fff;
}
.ri-marca--oei       { max-height: clamp(1.5rem, 4.4dvh, 2.85rem); }
.ri-marca--minc,
.ri-marca--mec       { max-height: clamp(1.45rem, 4.2dvh, 2.75rem); }
.ri-marca--pnab      { max-height: clamp(2.1rem, 6dvh, 3.7rem); }

.ri-divisor {
  width: 1px;
  height: clamp(1.6rem, 5.2dvh, 3.4rem);
  margin: 0;
  border: 0;
  background: rgba(20, 16, 8, 0.16);
}

/* ---- compacto: duas linhas internas, nunca uma coluna alta ---- */
@media (max-width: 64rem) {
  .regua-institucional {
    flex-wrap: wrap;
    gap: clamp(0.3rem, 1.2vw, 0.8rem) clamp(0.5rem, 2vw, 1.2rem);
  }
}

@media (max-width: 40rem) {
  /* DUAS linhas, nunca três:
     linha 1 — Reconhecimento (Viva + OEI + MinC + MEC)
     linha 2 — Movimento | PNAB, dividindo a largura
     As alturas são normalizadas opticamente: marcas mais quadradas
     recebem altura menor para não pesarem mais que as horizontais. */
  .regua-institucional {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    height: clamp(66px, 9dvh, 80px);
    gap: clamp(0.1rem, 0.4dvh, 0.24rem) clamp(0.25rem, 1.4vw, 0.6rem);
    padding: clamp(0.2rem, 0.6dvh, 0.36rem) clamp(0.28rem, 1.2vw, 0.55rem);
  }

  .ri-grupo {
    display: grid;
    grid-template-columns: clamp(46px, 13vw, 58px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.2rem, 1.1vw, 0.4rem);
  }

  /* linha 1 centralizada no eixo da tela: vira flex para o conjunto
     label+marcas ficar centrado, em vez de o grid fixar a coluna */
  .ri-grupo:nth-of-type(1) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.28rem, 1.4vw, 0.55rem);
  }

  .ri-grupo:nth-of-type(1) .ri-grupo__titulo {
    width: auto;
    max-width: none;      /* "Reconhecimento" é palavra única e não quebra */
    white-space: nowrap;
    text-align: right;
  }

  .ri-grupo:nth-of-type(2),
  .ri-grupo:nth-of-type(3) {
    grid-template-columns: clamp(38px, 11vw, 48px) minmax(0, 1fr);
  }

  /* linha 1: o grupo do prêmio ocupa a largura toda */
  .ri-grupo:nth-of-type(1) { flex: 0 0 100%; max-width: 100%; }

  /* linha 2: Movimento e PNAB dividem a largura */
  .ri-grupo:nth-of-type(2),
  .ri-grupo:nth-of-type(3) {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(50% - 0.75rem);
    align-self: center;
  }

  .ri-grupo__titulo {
    max-width: none;
    width: auto;
    font-size: clamp(0.28rem, 1.32vw, 0.38rem);
    letter-spacing: 0.015em;
    line-height: 1.08;
    text-align: right;
  }

  .ri-grupo__itens {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(0.18rem, 1.2vw, 0.42rem);
  }

  /* separador sutil entre os dois grupos da linha 2 */
  .ri-divisor {
    display: block;
    flex: 0 0 auto;
    width: 1px;
    height: clamp(1.1rem, 3.2dvh, 1.7rem);
    background: rgba(20, 16, 8, 0.14);
  }

  .ri-divisor:first-of-type { display: none; }

  /* alturas normalizadas opticamente */
  .ri-marca--premio { max-height: clamp(1.05rem, 2.9dvh, 1.45rem); }
  .ri-marca--oei       { max-height: clamp(0.8rem, 2.15dvh, 1.1rem); }
  .ri-marca--minc,
  .ri-marca--mec       { max-height: clamp(0.86rem, 2.3dvh, 1.18rem); }
  /* linha 2 tem largura sobrando: as marcas crescem até o limite
     da metade disponível, mantendo proporção e sem corte */
  .ri-marca--movimento {
    max-height: clamp(1.9rem, 5.2dvh, 2.6rem);
    max-width: 100%;
  }
  .ri-marca--pnab {
    max-height: clamp(1.35rem, 3.6dvh, 1.85rem);
    max-width: 100%;
  }
}

/* ============================================================
   LINHA 2 NO CELULAR: MAIS ESPAÇO PARA A REALIZAÇÃO

   Os dois grupos dividiam a largura ao meio, mas a faixa da PNAB é
   muito mais horizontal (1475x184, quase 8:1) que a marca do
   Movimento. Com metade da linha ela ficava com 18px de altura
   contra 42px da vizinha, e sobrava vazio ao lado do Movimento.

   Agora a divisão acompanha o formato de cada peça, e a faixa
   encosta na borda como as marcas da linha de cima.
   ============================================================ */
@media (max-width: 40rem) {
  .ri-grupo:nth-of-type(2) {
    flex: 0 1 auto;
    max-width: 40%;
  }

  .ri-grupo:nth-of-type(3) {
    flex: 1 1 auto;
    max-width: 60%;
    grid-template-columns: clamp(30px, 8.5vw, 40px) minmax(0, 1fr);
    justify-items: end;      /* a faixa encosta na direita, sem vão */
  }

  .ri-grupo:nth-of-type(3) .ri-grupo__itens {
    justify-content: flex-end;
    width: 100%;
  }

  .ri-marca--pnab {
    max-height: clamp(1.6rem, 4.4dvh, 2.3rem);
    max-width: 100%;
  }

  /* a régua encosta mais na borda: o vão de 11px virava espaço morto */
  .regua-institucional {
    padding-right: clamp(0.16rem, 0.7vw, 0.34rem);
  }
}

/* ============================================================
   RESPIRO SIMÉTRICO DENTRO DA FAIXA

   No celular a marca do Movimento chegava a 4px da borda de baixo
   enquanto a faixa da PNAB parava a 11,6px, e no topo sobravam 3px.
   As marcas ficavam encostadas nas bordas e desencontradas entre si.

   Agora a faixa tem folga igual em cima e embaixo, as duas linhas
   têm o mesmo respiro entre si, e cada marca fica centrada na sua
   linha — o que já valia no desktop passa a valer aqui.
   ============================================================ */
@media (max-width: 40rem) {
  .regua-institucional {
    --ri-folga: clamp(0.3rem, 1.1dvh, 0.55rem);
    height: auto;
    min-height: clamp(66px, 9dvh, 80px);
    align-content: center;
    padding-block: var(--ri-folga);
    row-gap: var(--ri-folga);
  }

  /* cada linha centra as próprias marcas na altura */
  .ri-grupo { align-items: center; }
  .ri-grupo__itens { align-items: center; }

  /* alturas com teto comum: nenhuma marca encosta na borda */
  .ri-marca--movimento { max-height: clamp(1.75rem, 4.7dvh, 2.35rem); }
  .ri-marca--pnab      { max-height: clamp(1.45rem, 3.9dvh, 2rem); }


}