/* Bloque de branding institucional responsivo */
#site-branding {
  background-color: var(--piia-primary);
  padding: 0.5rem 12px !important; /* Colchón dinámico alineado al texto */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important; /* Evita que el padding estire el contenedor */
  display: block !important;
}

#site-branding .name a,
#site-branding .name,
#site-branding .slogan {
  color: #ffffff;
  text-decoration: none;
  display: block;
  overflow-wrap: break-word; /* Si el nombre es largo, salta de línea en vez de estirar el sitio */
}

#site-branding .name a,
#site-branding .name {
  /* Letra fluida: mide 1.2rem en pantallas micro-angostas y escala hasta 2rem en PC */
  font-size: clamp(1.2rem, 3vw + 0.5rem, 2rem) !important;
  font-weight: 700;
  line-height: 1.2;
}