/* Encabezado: cápsula redondeada al abrir la página; apenas se baja,
   se estira y queda como barra completa fija arriba (sin huecos encima).
   encabezado.js pone la clase .es-barra al hacer scroll. */
.brand-header {
  transition: top .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), max-width .45s cubic-bezier(.2,.8,.2,1),
              border-radius .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1),
              background-color .3s ease, box-shadow .3s ease !important;
}
.brand-header.es-barra {
  top: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 0 !important;
  border-width: 0 0 1px 0 !important; background: rgba(250,247,242,.96) !important;
  box-shadow: 0 8px 24px -16px rgba(21,17,0,.35) !important;
  /* el logo y el menú quedan en el mismo lugar que en la cápsula: el cambio no salta */
  padding-left: max(24px, calc((100% - 1024px) / 2 + 24px)) !important;
  padding-right: max(24px, calc((100% - 1024px) / 2 + 24px)) !important;
}
@media (max-width: 900px) {
  .brand-header.es-barra { padding: 8px 16px !important; }
  .brand-header.es-barra #main-nav { border-radius: 0 0 24px 24px !important; top: 100% !important; }
}